import React, { FC } from 'react'; import { getPortfolioProjects } from '../../utils/portfolio'; import { useRouter } from 'next/router'; import styled from 'styled-components'; import Card from '../../components/Card'; import IconButton from '../../components/IconButton'; import Head from 'next/head'; interface Props { portfolioProjects: { title: string; description: string; image?: 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: inline-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; } .projects-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 = ({ portfolioProjects }) => { const router = useRouter(); return ( <> Portfolio | Hazem Krimi

router.back()}> Back

Portfolio

{portfolioProjects.length !== 0 ? ( portfolioProjects.map(({ slug, ...rest }) => ( )) ) : (

Nothing for now

)}

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