import React from 'react' import Head from 'next/head' import TopBar from './Topbar' import { css } from '@emotion/css' import Footer from './Footer' import { Sidebar, SidebarProps } from './Sidebar' import Hero from './Hero' type LayoutProps = { title: string description?: string heroImage?: React.ReactNode sidebar?: SidebarProps showHero?: boolean } const LayoutWithSidebar = css({ display: 'grid', minHeight: '100vh', position: 'relative', gridTemplateColumns: '272px 1fr', gridTemplateAreas: "'header header' 'sidebar main' 'sidebar footer'", gridTemplateRows: 'auto 1fr auto' }) const LayoutWithoutSidebar = css({ display: 'grid', minHeight: '100vh', position: 'relative', gridTemplateAreas: "'header header' 'main main' 'footer footer'", gridTemplateRows: 'auto 1fr auto' }) const Layout: React.FC = ({ title, children, description, sidebar, showHero, heroImage }) => { return (
{title} - knk UI
{!!sidebar && ( )}
{!!showHero && ()}
* ': { gridColumn: '1 / span 12', marginTop: 0, marginBottom: 0 } })} > {children}
) } export default Layout