ionic react sliding item

//tab3.tsx

import React, { useState } from 'react';
import {
  IonContent, IonHeader, IonPage, IonTitle, IonToolbar,
  IonAlert, IonButton, IonCard, IonCardHeader,
  IonCardSubtitle, IonCardTitle, IonCardContent,
  IonItem, IonIcon, IonLabel, IonBadge, IonList,
  IonItemDivider, IonCheckbox, IonFab, IonFabButton,
  IonFabList, IonItemGroup, IonItemSliding,
  IonItemOptions, IonItemOption, IonNote
} from '@ionic/react';
import ExploreContainer from '../components/ExploreContainer';
import './Tab3.css';
import {
  add, settings, share, person,
  arrowForwardCircle, arrowBackCircle, arrowUpCircle,
  logoVimeo, logoFacebook, logoInstagram,
  logoTwitter, logoYoutube, heart, trash, star,
  archive,
} from 'ionicons/icons';

const Tab3: React.FC = () => {

  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonTitle>Sliding Item Examples</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent>
        <IonList>
          {/* Sliding item with text options on both sides */}
          <IonItemSliding>
            <IonItemOptions side="start">
              <IonItemOption onClick={() => console.log('favorite clicked')}>Favorite</IonItemOption>
              <IonItemOption color="danger" onClick={() => console.log('share clicked')}>Share</IonItemOption>
            </IonItemOptions>

            <IonItem>
              <IonLabel>Item Options</IonLabel>
            </IonItem>

            <IonItemOptions side="end">
              <IonItemOption onClick={() => console.log('unread clicked')}>Unread</IonItemOption>
            </IonItemOptions>
          </IonItemSliding>

          {/* Sliding item with expandable options on both sides */}
          <IonItemSliding>
            <IonItemOptions side="start">
              <IonItemOption color="danger" expandable>
                Delete
      </IonItemOption>
            </IonItemOptions>

            <IonItem>
              <IonLabel>Expandable Options</IonLabel>
            </IonItem>

            <IonItemOptions side="end">
              <IonItemOption color="tertiary" expandable>
                Archive
      </IonItemOption>
            </IonItemOptions>
          </IonItemSliding>

          {/* Multi-line sliding item with icon options on both sides */}
          <IonItemSliding id="item100">
            <IonItem href="#">
              <IonLabel>
                <h2>HubStruck Notifications</h2>
                <p>A new message in your network</p>
                <p>Oceanic Next has joined your network</p>
              </IonLabel>
              <IonNote slot="end">
                10:45 AM
      </IonNote>
            </IonItem>

            <IonItemOptions side="start">
              <IonItemOption>
                <IonIcon slot="icon-only" icon={heart}></IonIcon>
              </IonItemOption>
            </IonItemOptions>

            <IonItemOptions side="end">
              <IonItemOption color="danger">
                <IonIcon slot="icon-only" icon={trash}></IonIcon>
              </IonItemOption>
              <IonItemOption>
                <IonIcon slot="icon-only" icon={star}></IonIcon>
              </IonItemOption>
            </IonItemOptions>
          </IonItemSliding>

          {/* Sliding item with icon start options on end side */}
          <IonItemSliding>
            <IonItem>
              <IonLabel>
                Sliding Item, Icons Start
      </IonLabel>
            </IonItem>
            <IonItemOptions>
              <IonItemOption color="primary">
                <IonIcon slot="start" icon={heart}></IonIcon>
        More
      </IonItemOption>
              <IonItemOption color="secondary">
                <IonIcon slot="start" icon={archive}></IonIcon>
        Archive
      </IonItemOption>
            </IonItemOptions>
          </IonItemSliding>

          {/* Sliding item with icon end options on end side */}
          <IonItemSliding>
            <IonItem>
              <IonLabel>
                Sliding Item, Icons End
      </IonLabel>
            </IonItem>
            <IonItemOptions>
              <IonItemOption color="primary">
                <IonIcon slot="end" icon={heart}></IonIcon>
        More
      </IonItemOption>
              <IonItemOption color="secondary">
                <IonIcon slot="end" icon={archive}></IonIcon>
        Archive
      </IonItemOption>
            </IonItemOptions>
          </IonItemSliding>

          {/* Sliding item with icon top options on end side */}
          <IonItemSliding>
            <IonItem>
              <IonLabel>
                Sliding Item, Icons Top
      </IonLabel>
            </IonItem>
            <IonItemOptions>
              <IonItemOption color="primary">
                <IonIcon slot="top" icon={heart}></IonIcon>
        More
      </IonItemOption>
              <IonItemOption color="secondary">
                <IonIcon slot="top" icon={archive}></IonIcon>
        Archive
      </IonItemOption>
            </IonItemOptions>
          </IonItemSliding>

          {/* Sliding item with icon bottom options on end side */}
          <IonItemSliding>
            <IonItem>
              <IonLabel>
                Sliding Item, Icons Bottom
      </IonLabel>
            </IonItem>
            <IonItemOptions>
              <IonItemOption color="primary">
                <IonIcon slot="bottom" icon={heart}></IonIcon>
        More
      </IonItemOption>
              <IonItemOption color="secondary">
                <IonIcon slot="bottom" icon={archive}></IonIcon>
        Archive
      </IonItemOption>
            </IonItemOptions>
          </IonItemSliding>
        </IonList>
      </IonContent>
    </IonPage>
  );
};

export default Tab3;