53 lines
1.5 KiB
TypeScript
53 lines
1.5 KiB
TypeScript
import dynamic from 'next/dynamic'
|
|
import cx from 'classnames'
|
|
import Comments from '../Comments'
|
|
import { useReducedMotion } from 'src/hooks/useReducedMotion'
|
|
import { Wrapper } from '../Wrapper'
|
|
import { Header } from './Header'
|
|
import { ConfigContext } from 'src/context/ConfigContext'
|
|
import config from 'src/config'
|
|
import { Footer } from '../Footer'
|
|
|
|
const Navigation = dynamic(() => import('../Navigation').then(mod => mod.Navigation), {
|
|
ssr: false,
|
|
})
|
|
|
|
export interface IAppProps {
|
|
menu: any
|
|
showAuthor: boolean
|
|
menuPadding: boolean
|
|
layout: 'full' | 'wide' | 'thin'
|
|
}
|
|
|
|
export const App: React.FC<IAppProps> = props => {
|
|
const motionDisabled = useReducedMotion()
|
|
|
|
return (
|
|
<ConfigContext.Provider value={config}>
|
|
<Wrapper
|
|
header={(
|
|
<Header>
|
|
<Navigation
|
|
items={props.menu.items}
|
|
/>
|
|
</Header>
|
|
)}
|
|
footer={(
|
|
<Footer
|
|
showAuthor={props.showAuthor}
|
|
/>
|
|
)}
|
|
>
|
|
<div className={cx('content', `content_${props.layout}`, {
|
|
'content--padding-top--menu': props.menuPadding,
|
|
'reduced-motion': motionDisabled,
|
|
})}>
|
|
{props.children}
|
|
</div>
|
|
|
|
{/* <Comments /> */}
|
|
</Wrapper>
|
|
</ConfigContext.Provider>
|
|
)
|
|
}
|