nice category list, markdown

src/app/cv/_components/CvEntry.tsx

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