calendrier-avent/components/custom/testCard.tsx

51 lines
1.9 KiB
TypeScript

'use client';
import Calendar from "../../images/date.svg";
import Image from "next/image";
import { Ban, Snowflake, CircleOff } from "lucide-react";
export function TestCard({ data, error, isLoading }: { data: any; error: any; isLoading: boolean }) {
console.log(data);
if (isLoading)
return (
<div className={"w-fit h-fit relative"}>
<Image src={Calendar} alt={"Calendrier absolute"} />
<div className={"w-full h-full absolute top-0 left-0 p-4 flex flex-col place-content-end text-center"}>
<Snowflake width={36} height={36} color={"#000000"} className={"animate-spin place-self-center"} />
<span className={"text-black text-xs"}>Chargement</span>
</div>
</div>
);
if (error)
return (
<div className={"w-fit h-fit relative"}>
<Image src={Calendar} alt={"Calendrier absolute"} />
<div className={"w-full h-full absolute top-0 left-0 p-4 flex flex-col place-content-end text-center"}>
<Ban width={36} height={36} color={"#000000"} className={"place-self-center"}/>
<span className={"text-black text-xs"}>Erreur</span>
</div>
</div>
);
if (data.status == 404)
return (
<div className={"w-fit h-fit relative"}>
<Image src={Calendar} alt={"Calendrier absolute"} />
<div className={"w-full h-full absolute top-0 left-0 p-4 flex flex-col place-content-end text-center"}>
<CircleOff width={36} height={36} color={"#000000"} className={"place-self-center"}/>
<span className={"text-black text-xs"}>Pas de test</span>
</div>
</div>
);
return (
<div className={"w-fit h-fit relative"}>
<Image src={Calendar} alt={"Calendrier absolute"} />
<div className={"w-full h-full absolute top-0 left-0 p-4 flex flex-col place-content-end text-center"}>
<span className={"text-black text-[36px] font-medium"}>{new Date().getDate()}</span>
<span className={"text-black text-xs"}>{data.testOf.firstName}</span>
</div>
</div>
);
}