import React, { FC } from 'react'; import { useRouter } from 'next/router'; import { getBlogPosts } from '../../utils/blog'; import styled from 'styled-components'; import Card from '../../components/Card'; import IconButton from '../../components/IconButton'; import Head from 'next/head'; interface Props { blogPosts: { title: string; author: string; description: string; slug: string; date: string; tags?: string[]; }[]; } const Wrapper = styled.div` min-height: 75vh; padding: 1rem 0rem; .back { cursor: pointer; text-align: left; color: #3f9aee; display: flex; align-items: center; } h1 { font-size: 1.7rem; margin-bottom: 1rem; } h4 { font-size: 1.3rem; grid-column: 1 / -1; align-self: center; justify-self: center; } .articles-wrapper { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); grid-auto-rows: minmax(100px, auto); align-items: stretch; justify-items: center; gap: 1rem; } `; const Index: FC = ({ blogPosts }) => { const router = useRouter(); return ( <> Blog | Hazem Krimi

router.back()}> Back

Blog

{blogPosts.length !== 0 ? ( blogPosts.map(({ slug, ...rest }) => ( router.push(`/blog/${slug}`)} /> )) ) : (

Nothing for now

)}

); }; export default Index; export const getStaticProps = async () => { const blogPosts = getBlogPosts(); return { props: { blogPosts } }; };