cv page in pretty good state, markdown/html support added to description

src/app/cv/_components/CvEntry.tsx

@@ -1,12 +1,13 @@
 import { trpc } from "~/app/_trpc/Client"
-import { Card, CardAction, CardContent, CardFooter, CardHeader, CardTitle } from "~/components/ui/card"
+import { Card, 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"
+import Markdown from 'react-markdown'
+import rehypeRaw from 'rehype-raw'
+import { format } from 'date-fns'
+
 export default function CvEntry(params: {
 	initialData: EntryRouterOutputs['get'] | Element<Element<CategoryRouterOutputs['list']>['cvEntry']>
 }) {
@@ -18,17 +19,29 @@ export default function CvEntry(params: {
 				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>
+							{
+								data.title ?
+									<CardHeader>
+										<CardTitle> {data.title} </CardTitle>
+									</CardHeader> :
+									<></>
+							}
+							{
+								data.description ?
+									<CardContent>
+										<div>
+											<Markdown rehypePlugins={[rehypeRaw]}>{data.description}</Markdown>
+										</div>
+									</CardContent> :
+									<></>
+							}
+							{
+								!data.hideDates ?
+								<CardFooter className="text-sm">
+									{`von ${format((new Date()).setTime(Date.parse(data.fromTime)), 'M. yyyy')} bis zum ${format((new Date()).setTime(Date.parse(data.toTime)), 'M. yyyy')}`}
+								</CardFooter> :
+								<></>
+							}
 						</Card>
 					</> :
 					<>