gregor/gregorlohaus.com
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

backup

Browse Source
This commit is contained in:
Gregor Lohaus
2025-06-06 03:12:19 +02:00
parent be9a9af137
commit 0aab9f55d7
49 changed files with 3255 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

57
src/app/cv/_components/CvCategory.tsx
View File

@@ -2,28 +2,41 @@
import { trpc } from "~/app/_trpc/Client"
import CvEntry, { type CvEntryProps } from "./CvEntry"
import type { servTrpc } from "~/app/_trpc/ServerClient"
import type { inferProcedureOutput } from "@trpc/server"
import type { RouterOutputs } from "~/server/routers/_app"
import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/card"
type CvCategoryProps = {
initialData: Awaited<ReturnType<typeof servTrpc.cv.category.list>>,
initialData: RouterOutputs['cv']['category']['get'],
layout: "row"|"col",
children?: React.ReactElement<CvEntryProps>
}
export default function CvCategory(props:CvCategoryProps) {
const cvCategories = trpc.cv.category.list.useQuery(undefined,{
initialData: props.initialData,
// refetchOnMount: false,
// refetchOnReconnect: false,
});
if (cvCategories.isPending) {
return (<div> Loading ... </div>);
}
return (
<div>
{cvCategories.data.map((cat) => {
return (
<div key={cat.id}>
{cat.name}
</div>
)
})}
</div>
)
}
export default function CvCategory(props:CvCategoryProps) {
const query = trpc.cv.category.get.useQuery({id: props.initialData? props.initialData.id : ""});
if (query.data !== undefined) {
return (
<Card className="gsapan">
<CardHeader>
<CardTitle>
{query.data?.name}
</CardTitle>
</CardHeader>
{(query.data?.cvEntry.length ? query.data?.cvEntry.length : 0 ) > 0 ?
<CardContent>
</CardContent>
:
<></>
}
</Card>
)
} else {
return (
<Card className="gsapan">
<CardHeader>
<CardTitle>
Loading ...
</CardTitle>
</CardHeader>
</Card>
);
}
}

2
src/app/cv/_components/CvEntry.tsx
View File

@@ -1,7 +1,9 @@
import { trpc } from "~/app/_trpc/Client"
import type { cvEntry } from "~/server/db/schema"
export type CvEntryProps = typeof cvEntry
export default function CvEntry(cvEntry: CvEntryProps) {
const query = trpc.cv.entry.list.useQuery()
return (<></>)
}

23
src/app/cv/_components/SidebarTriggerDisappearsOnMobile.tsx Normal file
View File

@@ -0,0 +1,23 @@
import { SidebarTrigger, useSidebar } from "~/components/ui/sidebar";
export default function SidebarTriggerDisappearsOnMobile() {
const { isMobile, openMobile, state } = useSidebar()
if (!isMobile) {
if (state == "expanded") {
return (
<SidebarTrigger className="fixed z-[52] left-65 top-100" />
)
} else {
return (
<SidebarTrigger className="fixed z-[52] left-3 top-100" />
)
}
} else if (!openMobile) {
return (
<SidebarTrigger className="fixed z-[52] left-3 top-100" />
)
} else {
<>
</>
}
}

3
src/app/cv/layout.tsx
View File

@@ -1,5 +1,4 @@
'use client'
export default function RootLayout({
export default async function RootLayout({
children,
}: Readonly<{ children: React.ReactNode}>) {
return (

109
src/app/cv/page.tsx
View File

@@ -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 (
<>
</>
)
}
}