115 lines
3.6 KiB
JavaScript
115 lines
3.6 KiB
JavaScript
import {
|
|
IonButton,
|
|
IonButtons,
|
|
IonCard,
|
|
IonCardContent,
|
|
IonCardSubtitle,
|
|
IonCardTitle,
|
|
IonCol,
|
|
IonContent,
|
|
IonGrid,
|
|
IonHeader,
|
|
IonIcon,
|
|
IonPage,
|
|
IonRow,
|
|
IonTitle,
|
|
IonToolbar,
|
|
useIonRouter,
|
|
} from '@ionic/react';
|
|
import { bookOutline, chevronBackOutline, heart, search } from 'ionicons/icons';
|
|
import { useStoreState } from 'pullstate';
|
|
import { useRef } from 'react';
|
|
import { WordStore } from '../store';
|
|
import { getFavourites, getSearchCount } from '../store/Selectors';
|
|
|
|
const Tab1 = () => {
|
|
const router = useIonRouter();
|
|
const pageRef = useRef(null);
|
|
const favourites = useStoreState(WordStore, getFavourites);
|
|
const searchCount = useStoreState(WordStore, getSearchCount);
|
|
|
|
function handleBackClick() {
|
|
router.goBack();
|
|
}
|
|
|
|
return (
|
|
<IonPage ref={pageRef}>
|
|
<IonHeader>
|
|
<IonToolbar>
|
|
<IonTitle>Dashboard</IonTitle>
|
|
|
|
<IonButtons slot="start">
|
|
<IonButton onClick={() => handleBackClick()}>
|
|
<IonIcon icon={chevronBackOutline} color="primary" />
|
|
</IonButton>
|
|
</IonButtons>
|
|
</IonToolbar>
|
|
</IonHeader>
|
|
<IonContent fullscreen>
|
|
<IonHeader collapse="condense">
|
|
<IonToolbar>
|
|
<IonTitle size="large">Dashboard</IonTitle>
|
|
|
|
<IonButtons slot="start">
|
|
<IonButton onClick={() => handleBackClick()}>
|
|
<IonIcon icon={chevronBackOutline} color="primary" />
|
|
</IonButton>
|
|
</IonButtons>
|
|
</IonToolbar>
|
|
</IonHeader>
|
|
|
|
<IonGrid>
|
|
<IonRow className={`animate__animated animate__faster animate__fadeIn`}>
|
|
<IonCol size="12">
|
|
<IonCard>
|
|
<IonCardContent>
|
|
<IonIcon icon={bookOutline} color="primary" style={{ fontSize: '2rem' }} />
|
|
<IonCardTitle>Ionic Dictionary App</IonCardTitle>
|
|
<p>Based on the English language</p>
|
|
</IonCardContent>
|
|
</IonCard>
|
|
</IonCol>
|
|
</IonRow>
|
|
|
|
<IonRow className={`animate__animated animate__faster animate__fadeIn`}>
|
|
<IonCol size="12">
|
|
<IonCard>
|
|
<IonCardContent>
|
|
<IonCardTitle>Did you know?</IonCardTitle>
|
|
<p>There are 171, 146 words in the English language!</p>
|
|
<IonButton expand="block" className="ion-margin-top" routerLink="/search">
|
|
Search now →
|
|
</IonButton>
|
|
</IonCardContent>
|
|
</IonCard>
|
|
</IonCol>
|
|
</IonRow>
|
|
|
|
<IonRow className={`animate__animated animate__faster animate__fadeIn`}>
|
|
<IonCol size="6">
|
|
<IonCard routerLink="/favourites">
|
|
<IonCardContent className="ion-text-center">
|
|
<IonIcon icon={heart} color="primary" />
|
|
<IonCardTitle>{favourites.length}</IonCardTitle>
|
|
<IonCardSubtitle>Favourites</IonCardSubtitle>
|
|
</IonCardContent>
|
|
</IonCard>
|
|
</IonCol>
|
|
<IonCol size="6">
|
|
<IonCard routerLink="/favourites">
|
|
<IonCardContent className="ion-text-center">
|
|
<IonIcon icon={search} color="primary" />
|
|
<IonCardTitle>{searchCount}</IonCardTitle>
|
|
<IonCardSubtitle>Searches</IonCardSubtitle>
|
|
</IonCardContent>
|
|
</IonCard>
|
|
</IonCol>
|
|
</IonRow>
|
|
</IonGrid>
|
|
</IonContent>
|
|
</IonPage>
|
|
);
|
|
};
|
|
|
|
export default Tab1;
|