import { Box , SlideFade , VStack } from "@chakra-ui/react" ; import dynamic from "next/dynamic" ; import React , { FC } from "react" ; import Project from "types/project" ; import Publication from "types/publication" ; import { Article } from ".contentlayer/types" ; const Jumbotron = dynamic ( ( ) => import ( "components/pages/index/base/jumbotron" ) ) ; const Articles = dynamic ( ( ) => import ( "components/layouts/articles" ) ) ; const Projects = dynamic ( ( ) => import ( "components/pages/index/base/projects" ) ) ; interface Props { articles : Article [ ] ; publications : Publication [ ] ; projects : Project [ ] ; } const Page = ( { articles = [ ] , publications = [ ] , projects = [ ] , } ) => { const allArticlesAndPublications = [ ... articles , ... publications , ] as ( Article & Publication ) [ ] ; const sortedAllArticlesAndPublications = allArticlesAndPublications . sort ( ( a , b ) => { return Number ( new Date ( b . date ) ) - Number ( new Date ( a . date ) ) ; } ) ; return ( < SlideFade in > < Box as = "section" h = { [ "calc(100vh - 109px)" , "calc(100vh - 109px)" , "calc(100vh - 64px)" ] } d = "flex" alignItems = "center" maxW = "2xl" mx = "auto" px = { 4 } > < Jumbotron /> < /Box> < Box > < Box maxW = "2xl" mx = "auto" px = { 4 } py = { 8 } > < VStack spacing = { 32 } order = { [ 2 , 2 , 2 , 1 ] } align = "left" > < Box as = "section" > < Articles articles = { sortedAllArticlesAndPublications . slice ( 0 , 10 ) } /> < /Box> < Box as = "section" > < Projects projects = { projects . slice ( 0 , 10 ) } /> < /Box> < /VStack> < /Box> < /Box> < /SlideFade>); } ; export default Page ;