1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768 |
- import {
- IonContent,
- IonButton,
- IonHeader,
- IonPage,
- IonTitle,
- IonToolbar,
- IonCard,
- IonCardHeader,
- IonCardSubtitle,
- IonCardTitle,
- IonNavLink,
- IonFooter,
- IonTabButton,
- IonIcon,
- IonLabel,
- IonImg
- } from '@ionic/react';
- import { square } from 'ionicons/icons';
- import './HomePage.css';
- import ListBiographies from './ListBiographies';
- import AboutUs from './AboutUs';
- import EnciclopediaPR from '../assets/EnciclopediaPR.png';
-
- const HomePage: React.FC = () => {
- return (
- <IonPage>
- <IonHeader>
- <IonToolbar>
- <IonTitle>Home Page</IonTitle>
- <IonImg style={{ height: 50, width: 100 }} src={EnciclopediaPR} alt='Logo'></IonImg>
- </IonToolbar>
- </IonHeader>
- <IonContent fullscreen>
- <IonCard>
- <IonCardHeader>
- <IonCardTitle>Biography</IonCardTitle>
- <IonCardSubtitle>Search for all Biographies</IonCardSubtitle>
- </IonCardHeader>
- <IonNavLink routerDirection="forward" component={() => <ListBiographies />}>
- <IonButton size="default" expand="block" shape="round">
- Go to
- </IonButton>
- </IonNavLink>
- </IonCard>
- <IonCard>
- <IonCardHeader>
- <IonCardTitle>Capsule</IonCardTitle>
- <IonCardSubtitle>Search for all Capsule</IonCardSubtitle>
- </IonCardHeader>
- <IonButton size="default" expand="block" shape="round">Go to</IonButton>
- </IonCard>
- </IonContent>
- <IonFooter>
- <IonToolbar>
- <IonNavLink routerDirection="forward" component={() => <AboutUs />}>
- <IonTabButton tab="AboutUs" href="/AboutUs">
- <IonIcon icon={square} />
- <IonLabel>About Us</IonLabel>
- </IonTabButton>
- </IonNavLink>
- </IonToolbar>
- </IonFooter>
- </IonPage>
- );
- };
-
- export default HomePage;
|