2021-12-20 04:06:30 +00:00
|
|
|
import clsx from 'clsx'
|
2022-03-30 23:56:51 +00:00
|
|
|
import { BottomNavBar } from './nav/nav-bar'
|
|
|
|
import Sidebar from './nav/sidebar'
|
2021-12-20 04:06:30 +00:00
|
|
|
|
2022-01-27 22:37:43 +00:00
|
|
|
export function Page(props: {
|
|
|
|
wide?: boolean
|
|
|
|
margin?: boolean
|
2022-01-27 23:06:31 +00:00
|
|
|
assertUser?: 'signed-in' | 'signed-out'
|
2022-03-30 23:56:51 +00:00
|
|
|
rightSidebar?: React.ReactNode
|
2022-01-27 22:37:43 +00:00
|
|
|
children?: any
|
|
|
|
}) {
|
2022-03-30 23:56:51 +00:00
|
|
|
const { wide, margin, assertUser, children, rightSidebar } = props
|
2021-12-20 04:06:30 +00:00
|
|
|
|
|
|
|
return (
|
|
|
|
<div>
|
|
|
|
<div
|
|
|
|
className={clsx(
|
2022-03-30 23:56:51 +00:00
|
|
|
'mx-auto w-full pb-16 lg:grid lg:grid-cols-12 lg:gap-8 xl:max-w-7xl',
|
2022-01-27 22:37:43 +00:00
|
|
|
wide ? 'max-w-6xl' : 'max-w-4xl',
|
|
|
|
margin && 'px-4'
|
2021-12-20 04:06:30 +00:00
|
|
|
)}
|
|
|
|
>
|
2022-03-30 23:56:51 +00:00
|
|
|
<div className="hidden lg:col-span-3 lg:block xl:col-span-2">
|
|
|
|
{assertUser !== 'signed-out' && <Sidebar />}
|
|
|
|
</div>
|
|
|
|
<main
|
|
|
|
className={clsx(
|
|
|
|
'mt-6 lg:col-span-9',
|
|
|
|
rightSidebar ? 'xl:col-span-7' : 'xl:col-span-8'
|
|
|
|
)}
|
|
|
|
>
|
|
|
|
{children}
|
|
|
|
</main>
|
|
|
|
<aside className="hidden xl:col-span-3 xl:block">
|
|
|
|
<div className="sticky top-4 space-y-4">{rightSidebar}</div>
|
|
|
|
</aside>
|
2021-12-20 04:06:30 +00:00
|
|
|
</div>
|
2022-03-30 23:56:51 +00:00
|
|
|
|
|
|
|
<BottomNavBar />
|
2021-12-20 04:06:30 +00:00
|
|
|
</div>
|
|
|
|
)
|
|
|
|
}
|