55 lines
2.4 KiB
TypeScript
55 lines
2.4 KiB
TypeScript
'use client'
|
|
import { Sidebar, SidebarContent, SidebarProvider } from "~/components/ui/sidebar";
|
|
import type { RouterOutputs } from "~/server/routers/_app"
|
|
import SidebarTriggerDisappearsOnMobile from "./SidebarTriggerDisappearsOnMobile";
|
|
import CvCategory from "./CvCategory";
|
|
import { useTimeLine } from "~/app/_providers/GsapProvicer";
|
|
export default function CvPage(props: { cv: RouterOutputs['categoryv2']['listAllWithEntries'] }) {
|
|
useTimeLine(props.cv)
|
|
const byPosition = (pos: "sidebar" | "header" | "col1" | "col2") =>
|
|
props.cv?.filter((c) => c.layoutPosition === pos) ?? []
|
|
const sidebarCategories = byPosition("sidebar")
|
|
const headerCategories = byPosition("header")
|
|
const col1Categories = byPosition("col1")
|
|
const col2Categories = byPosition("col2")
|
|
return (
|
|
<>
|
|
<SidebarProvider>
|
|
{sidebarCategories.length > 0 &&
|
|
<>
|
|
<SidebarTriggerDisappearsOnMobile />
|
|
<Sidebar>
|
|
<SidebarContent className="p-2 lg:pt-[3.2rem]">
|
|
{sidebarCategories.map((cat, i) => (
|
|
<CvCategory layout="col" position={i} category={cat} key={cat.id} />
|
|
))}
|
|
</SidebarContent>
|
|
</Sidebar>
|
|
</>
|
|
}
|
|
<div className="h-full w-full flex flex-wrap flex-row p-4 pt-8 ">
|
|
<div id="mainwrap" className="flex w-full flex-col gap-4 lg:px-[15vw]">
|
|
<div id="header" className="flex w-full h-fit flex-row gap-4 flex-wrap">
|
|
{headerCategories.map((cat, i) => (
|
|
<CvCategory layout="row" position={i} category={cat} key={cat.id} />
|
|
))}
|
|
</div>
|
|
<div id="colwrapper" className="flex flex-col lg:flex-row w-full h-3/4 gap-4">
|
|
<div id="col1" className={`flex flex-col w-full ${col1Categories.length > 0 ? "lg:w-1/2" : ""} h-full gap-4`}>
|
|
{col1Categories.map((cat, i) => (
|
|
<CvCategory layout="col" position={i} category={cat} key={cat.id} />
|
|
))}
|
|
</div>
|
|
<div id="col2" className={`flex flex-col w-full ${col2Categories.length > 0 ? "lg:w-1/2" : ""} h-full gap-4`}>
|
|
{col2Categories.map((cat, i) => (
|
|
<CvCategory layout="col" position={i} category={cat} key={cat.id} />
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</SidebarProvider>
|
|
</>
|
|
)
|
|
}
|