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

nice category list, markdown

Browse Source
This commit is contained in:
Gregor Lohaus
2025-06-12 23:37:05 +02:00
parent 4f24ef7db0
commit 128269de1f
21 changed files with 664 additions and 509 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -22,6 +22,9 @@ export default function CvCategory(props:CvCategoryProps) {
</CardHeader>
{(query.data?.cvEntry.length ? query.data?.cvEntry.length : 0 ) > 0 ?
<CardContent>
{query.data?.cvEntry.map((entry) => (
<CvEntry key={entry.id} initialData={entry}/>
))}
</CardContent>
:
<></>

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

@@ -1,9 +1,55 @@
import { trpc } from "~/app/_trpc/Client"
import { Card, CardAction, CardContent, CardFooter, CardHeader, CardTitle } from "~/components/ui/card"
import { Skeleton } from "~/components/ui/skeleton"
import type { Element } from "~/lib/utils"
import type { cvEntry } from "~/server/db/schema"
import type { CategoryRouterOutputs } from "~/server/routers/cv/category"
import type { EntryRouterOutputs } from "~/server/routers/cv/entry"
import Markdown from 'marked-react'
import { useEffect, useState } from "react"
export default function CvEntry(params: {
initialData: EntryRouterOutputs['get'] | Element<Element<CategoryRouterOutputs['list']>['cvEntry']>
}) {
const query = trpc.cv.entry.get.useQuery({ id: params.initialData?.id ? params.initialData.id : "" })
const { data } = query
return (
<>
{
data ?
<>
<Card className="w-fit">
<CardHeader>
<CardTitle> {data.title} </CardTitle>
</CardHeader>
<CardContent>
<div>
<Markdown>{data.description ? data.description : undefined}</Markdown>
</div>
</CardContent>
<CardFooter className="text-sm">
{`${data.fromTime}-${data.toTime}`}
</CardFooter>
</Card>
</> :
<>
<Card>
<CardHeader>
<div className="flex flex-row">
<CardTitle> <Skeleton className="h-2rem w-5rem" /> </CardTitle>
<span className="ml-auto text-sm"> <Skeleton className="h-1rem w-3rem" /> - <Skeleton className="h-1rem w-3rem" /> </span>
</div>
</CardHeader>
<CardContent>
<div>
<Skeleton className="h-4 w-[250px]" />
<Skeleton className="h-4 w-[200px]" />
<Skeleton className="h-4 w-[200px]" />
</div>
</CardContent>
</Card>
export type CvEntryProps = typeof cvEntry
export default function CvEntry(cvEntry: CvEntryProps) {
const query = trpc.cv.entry.list.useQuery()
return (<></>)
</>
}
</>
)
}

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

@@ -2,10 +2,8 @@
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 { useRef } from "react";
import { SidebarContent, SidebarProvider, Sidebar } from "~/components/ui/sidebar";
import SidebarTriggerDisappearsOnMobile from "./_components/SidebarTriggerDisappearsOnMobile";
import CvCategory from "./_components/CvCategory";
export default function CvPage() {
@@ -30,8 +28,6 @@ export default function CvPage() {
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();
@@ -56,7 +52,7 @@ export default function CvPage() {
<SidebarContent className="p-2">
{categories.data.filter((cat) => cat.layoutPosition == 'sidebar').map((cat) => {
return (
<CvCategory layout="col" initialData={cat} />
<CvCategory layout="col" initialData={cat} key={cat.id} />
)
})}
</SidebarContent>
@@ -65,29 +61,32 @@ export default function CvPage() {
<></>
}
<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">
<div id="mainwrap" className="flex w-full flex-col gap-[1rem]">
<div id="header" className="flex w-full h-fit flex-row">
{categories.data.filter((cat) => cat.layoutPosition == 'header').map((cat) => {
return (
<CvCategory layout="row" initialData={cat} />
<CvCategory layout="row" initialData={cat} key={cat.id} />
)
})}
</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">
<div id="colwrapper" className="flex flex-col md:flex-row w-full h-3/4 gap-[1rem]">
<div id="col1" className="flex flex-col w-full 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} />
<CvCategory layout="col" initialData={cat} key={cat.id} />
)
})}
</div>
{categories.data.filter((cat) => cat.layoutPosition == 'col2').length > 0 ?
<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} key={cat.id} />
)
})}
</div> :
<></>
}
</div>
</div>
</div>