52 lines
1.6 KiB
TypeScript
52 lines
1.6 KiB
TypeScript
import { PropsWithChildren } from 'react'
|
|
|
|
import Header from '@/components/client/Header'
|
|
import Footer from '@/components/server/Footer'
|
|
import colorMap from '@/lib/notion/utils/colorMap'
|
|
|
|
import './globals.css'
|
|
|
|
const notionColorsCssVars = Object.entries(colorMap)
|
|
.map(([name, colors]) =>
|
|
[
|
|
`--notion-${name}-dark-text:${colors.dark.text};`,
|
|
`--notion-${name}-dark-bg:${colors.dark.bg};`,
|
|
`--notion-${name}-light-text:${colors.light.text};`,
|
|
`--notion-${name}-light-bg:${colors.light.bg};`,
|
|
].join(''),
|
|
)
|
|
.join('')
|
|
|
|
const notionEachColorClass = Object.entries(colorMap)
|
|
.map(
|
|
([name]) =>
|
|
`.notion-color-${name}{--dark-text:var(--notion-${name}-dark-text);--dark-bg:var(--notion-${name}-dark-bg);--light-text:var(--notion-${name}-light-text);--light-bg:var(--notion-${name}-light-bg);}`,
|
|
)
|
|
.join('')
|
|
|
|
export default function BaseLayout({ children }: PropsWithChildren) {
|
|
return (
|
|
<html className="h-full antialiased" lang="pt-PT">
|
|
<head>
|
|
<style
|
|
dangerouslySetInnerHTML={{
|
|
__html: `:root{${notionColorsCssVars}} ${notionEachColorClass}`,
|
|
}}
|
|
/>
|
|
</head>
|
|
<body className="flex h-full flex-col bg-zinc-50 font-serif dark:bg-black">
|
|
<div className="fixed inset-0 flex justify-center sm:px-8">
|
|
<div className="flex w-full max-w-7xl lg:px-8">
|
|
<div className="w-full bg-white ring-1 ring-zinc-100 dark:bg-zinc-900 dark:ring-zinc-300/20" />
|
|
</div>
|
|
</div>
|
|
<div className="relative">
|
|
<Header />
|
|
<main>{children}</main>
|
|
<Footer />
|
|
</div>
|
|
</body>
|
|
</html>
|
|
)
|
|
}
|