import { FC } from 'react'; import { useRouter } from 'next/router'; import { getPortfolioProjects } from '../lib/portfolio'; import { getBlogPosts } from '../lib/blog'; import { GetStaticProps } from 'next'; import styled from 'styled-components'; import Hero from '../components/Hero'; import Button from '../components/Button'; import Card from '../components/Card'; import Head from 'next/head'; interface Props { blogPosts: { title: string; author: string; description: string; slug: string; date: string; tags?: string[]; }[]; portfolioProjects: { title: string; description: string; slug: string; date: string; tags?: string[]; }[]; } const Wrapper = styled.div` padding: 1rem 0rem; display: grid; grid-template-columns: auto; row-gap: 1rem; h1 { display: inline; font-size: 1.7rem; margin-right: 1rem; } h4 { font-size: 1.3rem; grid-column: 1 / -1; align-self: center; justify-self: center; } .blue { color: #1573ca; @media (max-width: 768px) { margin-top: 0.5rem; } } .portfolio, .blog { margin: 1rem 0rem; } .projects-wrapper, .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, portfolioProjects }) => { const router = useRouter(); return ( <> Hazem Krimi

Portfolio

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

Nothing for now

)}

Blog

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

Nothing for now

)}

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