51 lines
1.5 KiB
TypeScript
51 lines
1.5 KiB
TypeScript
import { Outlet } from "react-router-dom"
|
|
import { Content, Header, Mask, Navbar, Shell } from "./clients"
|
|
import Effects from "./effects"
|
|
import { LayoutProvider } from "./layout-context"
|
|
|
|
export default function AdminLayout() {
|
|
return (
|
|
<LayoutProvider>
|
|
<Effects />
|
|
<div className="relative h-dvh overflow-hidden">
|
|
<Shell>
|
|
<div className="col-start-1 row-start-1 row-span-2 bg-card overflow-hidden relative z-20">
|
|
<Navbar />
|
|
</div>
|
|
|
|
<div className="col-start-2 row-start-1 bg-card overflow-hidden relative z-20">
|
|
<Header />
|
|
</div>
|
|
|
|
<svg
|
|
className="col-start-2 row-start-2 w-full h-full z-20 pointer-events-none"
|
|
preserveAspectRatio="none"
|
|
>
|
|
<defs>
|
|
<mask id="top-left-rounded-mask">
|
|
<rect width="100%" height="100%" fill="white" />
|
|
<circle cx="16" cy="16" r="16" fill="black" />
|
|
<rect x="16" y="0" width="100%" height="32" fill="black" />
|
|
<rect x="0" y="16" width="32" height="100%" fill="black" />
|
|
<rect x="16" y="16" width="100%" height="100%" fill="black" />
|
|
</mask>
|
|
</defs>
|
|
<rect
|
|
width="100%"
|
|
height="100%"
|
|
className="fill-card"
|
|
mask="url(#top-left-rounded-mask)"
|
|
/>
|
|
</svg>
|
|
|
|
<Mask />
|
|
</Shell>
|
|
|
|
<Content>
|
|
<Outlet />
|
|
</Content>
|
|
</div>
|
|
</LayoutProvider>
|
|
)
|
|
}
|