package updates, minor bug fixes, stack items, background animation fixes

src/app/cv/_components/CvCategory.tsx

@@ -7,6 +7,8 @@ import type { RouterOutputs } from "~/server/routers/_app"
 import { cn } from "~/lib/utils" 
 import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/card"
 import type { ArrayElement } from "type-fest"
+import AnimatePopUp from "~/app/_components/Animated/AnimatePopUp";
+import { ScrollArea } from "~/components/ui/scroll-area";
 type CvCategoryProps = {
   initialData: ArrayElement<RouterOutputs['categoryv2']['listByLayoutPosition']>,
   layout: "row"|"col",
@@ -14,18 +16,23 @@ type CvCategoryProps = {
 }
 export default function CvCategory(props:CvCategoryProps)  {
   const category = trpc.categoryv2.getById.useQuery(props.initialData? props.initialData.id : "");
+  const entries = trpc.entryv2.byCategoryAndToDateDescending.useQuery(category.data?.id || "")
 		return (
-			<Card className={cn(props.layout == "row" ? "w-full" : "","gsapan")}>
+			<Card className={cn(props.layout == "row" ? "w-full" : "","gsapan", "h-screen")}>
 				<CardHeader>
 					<CardTitle>
 						{category.data?.name}
 					</CardTitle>
 				</CardHeader>
-				{(category.data?.cvEntry.length ? category.data?.cvEntry.length : 0 ) > 0 ?
+				{(entries.data?.length ? entries.data?.length : 0 ) > 0 ?
 					<CardContent className={cn(props.layout == "row" ? "flex flex-row flex-wrap justify-center lg:justify-between" : "flex flex-col","gap-4","overflow-scroll")}>
-						{category.data?.cvEntry.map((entry) => (
-							<CvEntry className={props.layout == "row" ? "w-full lg:w-fit" : undefined} key={entry.id} initialData={entry}/>
+						<ScrollArea>
+						{entries.data?.map((entry,i) => (
+							<AnimatePopUp position={i}key={entry.id}>
+							<CvEntry className={props.layout == "row" ? "w-full lg:w-fit" : undefined}  initialData={entry}/>
+							</AnimatePopUp>
 						))}
+					</ScrollArea>
 					</CardContent>
 					:
 					<></>

src/app/cv/_components/CvEntry.tsx

@@ -30,9 +30,9 @@ export default function CvEntry(params: {
 							{
 								data.description ?
 									<CardContent className="text-sm lg:text-base">
-										<div>
+										<article className="prose prose-zinc dark:prose-invert max-w-none">
 											<Markdown rehypePlugins={[rehypeHighlight, rehypeRaw]}>{data.description}</Markdown>
-										</div>
+										</article>
 									</CardContent> :
 									<></>
 							}