ionic react fab 2

//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,
} from '@ionic/react';
import ExploreContainer from '../components/ExploreContainer';
import './Tab3.css';
import {
  add, settings, share, person,
  arrowForwardCircle, arrowBackCircle, arrowUpCircle,
  logoVimeo, logoFacebook, logoInstagram,
  logoTwitter, logoYoutube
} from 'ionicons/icons';

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

  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonTitle>FabExamples</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent>
        <IonFab vertical="bottom" horizontal="end">
          <IonFabButton size='small'>
            <IonIcon icon={share} />
          </IonFabButton>

          <IonFabList side="top">
            <IonFabButton color="light">
              <IonIcon icon={logoFacebook} />
            </IonFabButton>
            <IonFabButton color="secondary">
              <IonIcon icon={logoTwitter} />
            </IonFabButton>
            <IonFabButton color='dark'>
              <IonIcon icon={logoYoutube} />
            </IonFabButton>
          </IonFabList>

          <IonFabList side="start">
            <IonFabButton color="primary">
              <IonIcon icon={logoVimeo} />
            </IonFabButton>
          </IonFabList>
        </IonFab>
      </IonContent>
    </IonPage>
  );
};

export default Tab3;