98 lines
3.8 KiB
TypeScript
98 lines
3.8 KiB
TypeScript
'use client'
|
|
import { useGSAP } from "@gsap/react";
|
|
import { useGsapContext,useTimeLine } from "../_providers/GsapProvicer";
|
|
import { trpc } from "../_trpc/Client";
|
|
import { useRef } from "react";
|
|
import { SidebarContent, SidebarProvider, Sidebar } from "~/components/ui/sidebar";
|
|
import SidebarTriggerDisappearsOnMobile from "./_components/SidebarTriggerDisappearsOnMobile";
|
|
import CvCategory from "./_components/CvCategory";
|
|
import gsap from 'gsap'
|
|
export default function CvPage() {
|
|
const sidebarCategories = trpc.categoryv2.listByLayoutPosition.useQuery("sidebar");
|
|
const col1Categories = trpc.categoryv2.listByLayoutPosition.useQuery("col1");
|
|
const headerCategories = trpc.categoryv2.listByLayoutPosition.useQuery("header");
|
|
const col2Categories = trpc.categoryv2.listByLayoutPosition.useQuery("col2");
|
|
const gsapContext = useGsapContext()
|
|
const container = useRef<HTMLDivElement>(null)
|
|
enum Direction {
|
|
Left = 1,
|
|
Up,
|
|
Right,
|
|
Down
|
|
}
|
|
const nextGsapConf = (direction: Direction) => {
|
|
switch (direction) {
|
|
case Direction.Left:
|
|
return { x: -100, opacity: 0, duration: 0.5 }
|
|
case Direction.Up:
|
|
return { y: -100, opacity: 0, duration: 0.5 }
|
|
case Direction.Right:
|
|
return { x: 100, opacity: 0, duration: 0.5 }
|
|
case Direction.Down:
|
|
return { y: 100, opacity: 0, duration: 0.5 }
|
|
}
|
|
}
|
|
useTimeLine(col2Categories)
|
|
useGSAP(() => {
|
|
const items = gsap?.utils.toArray<GSAPTweenTarget>('.gsapan');
|
|
let dir = Direction.Left;
|
|
items?.forEach(item => {
|
|
gsapContext?.addAnimation(gsap.from(item, nextGsapConf(dir)),0)
|
|
if (dir == Direction.Down) {
|
|
dir = Direction.Left
|
|
} else {
|
|
dir = dir + 1
|
|
}
|
|
})
|
|
}, { scope: container, dependencies: [headerCategories.data, sidebarCategories.data], revertOnUpdate: true })
|
|
return (
|
|
<>
|
|
<SidebarProvider ref={container}>
|
|
{sidebarCategories.data &&
|
|
<>
|
|
<SidebarTriggerDisappearsOnMobile />
|
|
<Sidebar className="gsapan ">
|
|
<SidebarContent className="p-2 lg:pt-[3.2rem]">
|
|
{sidebarCategories.data?.map((cat) => {
|
|
if (cat !== undefined) {
|
|
return (
|
|
<CvCategory layout="col" initialData={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.data?.map((cat) => {
|
|
return (
|
|
<CvCategory layout="row" initialData={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.data?.length ? col1Categories.data?.length : 0 > 0 ? "lg:w-1/2" : ""} h-full gap-4`}>
|
|
{col1Categories.data?.map((cat) => {
|
|
return (
|
|
<CvCategory layout="col" initialData={cat} key={cat.id} />
|
|
)
|
|
})}
|
|
</div>
|
|
<div id="col2" className={`flex flex-col w-full ${col2Categories.data?.length ? col2Categories.data?.length : 0 > 0 ? "lg:w-1/2" : ""} h-full gap-4`}>
|
|
{col2Categories.data?.map((cat) => {
|
|
return (
|
|
<CvCategory layout="col" initialData={cat} key={cat.id} />
|
|
)
|
|
})}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</SidebarProvider>
|
|
</>
|
|
)
|
|
}
|