backup

2025-06-06 03:12:19 +02:00
parent be9a9af137
commit 0aab9f55d7
49 changed files with 3255 additions and 93 deletions
--- a/src/app/cv/page.tsx
+++ b/src/app/cv/page.tsx
@@ -1,10 +1,103 @@
-import { servTrpc } from "~/app/_trpc/ServerClient"
+'use client'
+import { useGSAP } from "@gsap/react";
+import { useGsapContext } from "../_providers/GsapProvicer";
+import { trpc } from "../_trpc/Client";
+import { useRef, useState } from "react";
+import type { Element } from "~/lib/utils";
+import { Card } from "~/components/ui/card";
+import { SidebarContent, SidebarProvider, Sidebar, SidebarTrigger } from "~/components/ui/sidebar";
+import SidebarTriggerDisappearsOnMobile from "./_components/SidebarTriggerDisappearsOnMobile";
 import CvCategory from "./_components/CvCategory";
-export default async function CvPage() {
-  const cvCategories = await servTrpc.cv.category.list();
-  return (
-    <CvCategory initialData={cvCategories}>
-      <></>
-    </CvCategory>
-  )
+export default function CvPage() {
+  const categories = trpc.cv.category.list.useQuery();
+  const gsap = 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 }
+    }
+  }
+
+  type DataElement = Element<typeof categories.data>
+  useGSAP(() => {
+    const items = gsap?.utils.toArray<GSAPTweenTarget>('.gsapan');
+    const tl = gsap?.timeline();
+    let dir = Direction.Left;
+    items?.forEach(item => {
+      tl?.from(item, nextGsapConf(dir))
+      if (dir == Direction.Down) {
+        dir = Direction.Left
+      } else {
+        dir = dir + 1
+      }
+    })
+  }, { scope: container, dependencies: [categories.isFetched], revertOnUpdate: true })
+  if (categories.data !== undefined) {
+    return (
+      <>
+        <SidebarProvider ref={container}>
+          {categories.data.filter((cat) => cat.layoutPosition == 'sidebar').length > 0 ?
+            <>
+              <SidebarTriggerDisappearsOnMobile />
+              <Sidebar className="z-[51] gsapan">
+                <SidebarContent className="p-2">
+                  {categories.data.filter((cat) => cat.layoutPosition == 'sidebar').map((cat) => {
+                    return (
+                      <CvCategory layout="col" initialData={cat} />
+                    )
+                  })}
+                </SidebarContent>
+              </Sidebar>
+            </> :
+            <></>
+          }
+          <div className="h-full w-full flex flex-wrap flex-row p-2 ">
+            <div id="mainwrap" className="flex flex-wrap w-full flex-col">
+              <div id="header" className="flex flex-wrap w-full h-1/4 flex-row">
+                {categories.data.filter((cat) => cat.layoutPosition == 'header').map((cat) => {
+                  return (
+                    <CvCategory layout="row" initialData={cat} />
+                  )
+                })}
+              </div>
+              <div id="colwrapper" className="flex flex-wrap flex-row w-full h-3/4">
+                <div id="col1" className="flex flex-col w-full lg:w-1/2 h-full">
+                  {categories.data.filter((cat) => cat.layoutPosition == 'col1').map((cat) => {
+                    return (
+                      <CvCategory layout="col" initialData={cat} />
+                    )
+                  })}
+                </div>
+                <div id="col2" className="flex flex-wrap flex-col w-full lg:w-1/2 h-full">
+                  {categories.data.filter((cat) => cat.layoutPosition == 'col2').map((cat) => {
+                    return (
+                      <CvCategory layout="col" initialData={cat} />
+                    )
+                  })}
+                </div>
+              </div>
+            </div>
+          </div>
+        </SidebarProvider>
+      </>
+    )
+  } else {
+    return (
+      <>
+      </>
+    )
+  }
 }