import React , { FC } from 'react' ; import hydrate from 'next-mdx-remote/hydrate' ; import { majorScale , Pane , Heading , Spinner } from 'evergreen-ui' ; import Head from 'next/head' ; import { useRouter } from 'next/router' ; import { Post } from '../../types' ; import Container from '../../components/container' ; import HomeNav from '../../components/homeNav' ; const BlogPost = ( { source , frontMatter } ) => { const content = hydrate ( source ) ; const router = useRouter ( ) ; if ( router . isFallback ) { return ( < Pane width = "100%" height = "100%" > < Spinner size = { 48 } /> < /Pane>); } return ( < Pane > < Head > < title > { `Known Blog | ${ frontMatter . title }` } < /title> < meta name = "description" content = { frontMatter . summary } / > < /Head> < header > < HomeNav /> < /header> < main > < Container > < Heading fontSize = "clamp(2rem, 8vw, 6rem)" lineHeight = "clamp(2rem, 8vw, 6rem)" marginY = { majorScale ( 3 ) } > { frontMatter . title } < /Heading> < Pane > { content } < /Pane> < /Container> < /main> < /Pane>); } ; BlogPost . defaultProps = { source : '' , frontMatter : { title : 'default title' , summary : 'summary' , publishedOn : '' } , } ; /**
 * Need to get the paths here
 * then the the correct post for the matching path
 * Posts can come from the fs or our CMS
 */ export default BlogPost ;