52 lines
1.1 KiB
JavaScript
52 lines
1.1 KiB
JavaScript
import {
|
|
IonButton,
|
|
IonButtons,
|
|
IonContent,
|
|
IonHeader,
|
|
IonIcon,
|
|
IonPage,
|
|
IonTitle,
|
|
IonToolbar,
|
|
useIonRouter,
|
|
} from '@ionic/react';
|
|
import { Post } from '../components/Post';
|
|
import { blogPosts } from '../localData';
|
|
import { chevronBackOutline } from 'ionicons/icons';
|
|
|
|
const Home = () => {
|
|
const router = useIonRouter();
|
|
|
|
function handleBackClick() {
|
|
router.goBack();
|
|
}
|
|
|
|
return (
|
|
<IonPage>
|
|
<IonHeader>
|
|
<IonToolbar>
|
|
<IonTitle>Ionic Blog</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">Ionic Blog</IonTitle>
|
|
</IonToolbar>
|
|
</IonHeader>
|
|
|
|
{blogPosts.map((post, index) => (
|
|
<Post post={post} key={`post_${index}`} />
|
|
))}
|
|
</IonContent>
|
|
</IonPage>
|
|
);
|
|
};
|
|
|
|
export default Home;
|