69 lines
2.2 KiB
TypeScript
69 lines
2.2 KiB
TypeScript
import { trpc } from "~/app/_trpc/Client"
|
|
import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "~/components/ui/card"
|
|
import { Skeleton } from "~/components/ui/skeleton"
|
|
import { cn, type Defined } from "~/lib/utils"
|
|
import Markdown from 'react-markdown'
|
|
import { format } from 'date-fns'
|
|
import rehypeHighlight from 'rehype-highlight'
|
|
import rehypeRaw from 'rehype-raw'
|
|
import type { RouterOutputs } from "~/server/routers/_app"
|
|
import type { ArrayElement } from "type-fest"
|
|
export default function CvEntry(params: {
|
|
initialData: ArrayElement<Defined<RouterOutputs['categoryv2']['getById']>['cvEntry']>,
|
|
className?: string
|
|
}) {
|
|
const query = trpc.entryv2.getById.useQuery(params.initialData.id);
|
|
const { data, isError, error } = query
|
|
return (
|
|
<>
|
|
{
|
|
data ?
|
|
<>
|
|
<Card className={params.className ? cn("w-fit", params.className) : "w-fit"}>
|
|
{
|
|
data.title ?
|
|
<CardHeader>
|
|
<CardTitle> {data.title} </CardTitle>
|
|
</CardHeader> :
|
|
<></>
|
|
}
|
|
{
|
|
data.description ?
|
|
<CardContent className="text-sm lg:text-base">
|
|
<article className="prose prose-zinc dark:prose-invert max-w-none">
|
|
<Markdown rehypePlugins={[rehypeHighlight, rehypeRaw]}>{data.description}</Markdown>
|
|
</article>
|
|
</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>
|
|
</> :
|
|
<>
|
|
<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-60" />
|
|
<Skeleton className="h-4 w-50" />
|
|
<Skeleton className="h-4 w-50" />
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</>
|
|
}
|
|
</>
|
|
)
|
|
}
|