cv entry uses animated components

src/app/cv/_components/CvCategory.tsx

@@ -29,7 +29,7 @@ export default function CvCategory(props:CvCategoryProps)  {
 						<ScrollArea>
 						{entries.data?.map((entry,i) => (
 							<AnimatePopUp position={position + 0.4 + i * 0.2} key={entry.id}>
-							<CvEntry className={props.layout == "row" ? "w-full lg:w-fit" : undefined}  initialData={entry}/>
+							<CvEntry position={position + 0.4 + i * 0.2} className={props.layout == "row" ? "w-full lg:w-fit" : undefined}  initialData={entry}/>
 							</AnimatePopUp>
 						))}
 					</ScrollArea>

src/app/cv/_components/CvEntry.tsx

@@ -8,12 +8,16 @@ import rehypeHighlight from 'rehype-highlight'
 import rehypeRaw from 'rehype-raw'
 import type { RouterOutputs } from "~/server/routers/_app"
 import type { ArrayElement } from "type-fest"
+import AnimateTextIn from "~/app/_components/Animated/AnimateIn"
+import AnimatePopUp from "~/app/_components/Animated/AnimatePopUp"
 export default function CvEntry(params: {
 	initialData: ArrayElement<Defined<RouterOutputs['categoryv2']['getById']>['cvEntry']>,
-	className?: string
+	className?: string,
+	position?: number
 }) {
 	const query = trpc.entryv2.getById.useQuery(params.initialData.id);
 	const { data, isError, error } = query
+	const position = params.position ?? 0
 	return (
 		<>
 			{
@@ -23,23 +27,29 @@ export default function CvEntry(params: {
 							{
 								data.title ?
 									<CardHeader>
-										<CardTitle> {data.title} </CardTitle>
+										<AnimateTextIn position={position} animation="slide">
+											<CardTitle> {data.title} </CardTitle>
+										</AnimateTextIn>
 									</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>
+										<AnimatePopUp position={position + 0.2}>
+											<article className="prose prose-zinc dark:prose-invert max-w-none">
+												<Markdown rehypePlugins={[rehypeHighlight, rehypeRaw]}>{data.description}</Markdown>
+											</article>
+										</AnimatePopUp>
 									</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')}`}
+										<AnimateTextIn position={position + 0.4}>
+											{`von ${format((new Date()).setTime(Date.parse(data.fromTime)), 'M. yyyy')} bis zum ${format((new Date()).setTime(Date.parse(data.toTime)), 'M. yyyy')}`}
+										</AnimateTextIn>
 									</CardFooter> :
 									<></>
 							}