feat: enhance RinnovoLinkCard and ServizioLinkCard components with improved styling and status handling
This commit is contained in:
parent
9187e8964f
commit
c6b462a54d
1 changed files with 68 additions and 46 deletions
|
|
@ -124,7 +124,7 @@ const RinnovoLinkCard = ({
|
||||||
className={cn("transition-shadow hover:bg-muted/15 hover:shadow-md")}
|
className={cn("transition-shadow hover:bg-muted/15 hover:shadow-md")}
|
||||||
>
|
>
|
||||||
<CardHeader>
|
<CardHeader>
|
||||||
<CardTitle className="group-hover:underline">
|
<CardTitle className="text-xl group-hover:underline">
|
||||||
Rinnovo {data.codice}
|
Rinnovo {data.codice}
|
||||||
</CardTitle>
|
</CardTitle>
|
||||||
<CardDescription className="">
|
<CardDescription className="">
|
||||||
|
|
@ -185,52 +185,74 @@ const ServizioLinkCard = ({
|
||||||
}
|
}
|
||||||
key={servizio.servizio_id}
|
key={servizio.servizio_id}
|
||||||
>
|
>
|
||||||
<Card
|
{status === "in_attesa" ? (
|
||||||
className={cn(
|
<Card className="relative border-yellow-500 bg-yellow-500 text-white hover:bg-yellow-500/90 dark:bg-yellow-900 dark:hover:bg-yellow-900/90">
|
||||||
status === "attivo" && "border-green-500",
|
<span className="absolute top-5 right-5 -mt-1 -mr-1 flex size-7 items-center justify-center">
|
||||||
status === "in_attesa" &&
|
<span className="absolute inline-flex size-6 h-full w-full animate-ping rounded-full bg-white opacity-75" />
|
||||||
"border-yellow-500 bg-yellow-500 text-white hover:bg-yellow-500/90 dark:bg-yellow-900 dark:text-white dark:hover:bg-yellow-900/90",
|
<span className="relative inline-flex size-5 rounded-full bg-white"></span>
|
||||||
status === "interrotto" && "border-red-500",
|
</span>
|
||||||
status === "scaduto" && "border-gray-500",
|
|
||||||
status === "completato" && "border-blue-500",
|
|
||||||
"transition-shadow hover:bg-muted/15 hover:shadow-md",
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
<CardHeader>
|
|
||||||
<CardTitle className="group-hover:underline">
|
|
||||||
{t.servizio.servizio_titolo} {servizio.tipologia}
|
|
||||||
</CardTitle>
|
|
||||||
<CardDescription className="">
|
|
||||||
{t.servizio.servizio_creato_il}{" "}
|
|
||||||
{servizio.created_at.toLocaleDateString("it-IT")}
|
|
||||||
</CardDescription>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent className="flex flex-col flex-wrap gap-4 sm:flex-row sm:justify-between">
|
|
||||||
<div
|
|
||||||
className={cn(
|
|
||||||
"flex items-center gap-2",
|
|
||||||
status === "attivo" && "text-green-500",
|
|
||||||
status === "in_attesa" && "",
|
|
||||||
status === "interrotto" && "text-red-500",
|
|
||||||
status === "scaduto" && "text-gray-500",
|
|
||||||
status === "completato" && "text-blue-500",
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
<StatusIcon className="size-5" />
|
|
||||||
|
|
||||||
<span>{t.servizio.status[status]}</span>
|
<CardHeader>
|
||||||
</div>
|
<CardTitle className="text-xl group-hover:underline">
|
||||||
<div
|
{t.servizio.servizio_titolo} {servizio.tipologia}
|
||||||
className={cn(
|
</CardTitle>
|
||||||
"flex items-center gap-2 rounded-md text-muted-foreground group-hover:text-foreground",
|
<CardDescription className="text-white">
|
||||||
status === "in_attesa" && "animate-bounce text-white",
|
{t.servizio.servizio_creato_il}{" "}
|
||||||
)}
|
{servizio.created_at.toLocaleDateString("it-IT")}
|
||||||
>
|
</CardDescription>
|
||||||
<span>{t.servizio.vai_al_servizio}</span>
|
</CardHeader>
|
||||||
<MousePointerClick />
|
<CardContent className="flex flex-col flex-wrap gap-4 sm:flex-row sm:justify-between">
|
||||||
</div>
|
<div className="flex items-center gap-2">
|
||||||
</CardContent>
|
<StatusIcon className="size-5" />
|
||||||
</Card>
|
|
||||||
|
<span>{t.servizio.status[status]}</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-2 rounded-md font-semibold text-white underline underline-offset-2">
|
||||||
|
<span>{t.servizio.vai_al_servizio}</span>
|
||||||
|
<MousePointerClick />
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
) : (
|
||||||
|
<Card
|
||||||
|
className={cn(
|
||||||
|
status === "attivo" && "border-green-500",
|
||||||
|
status === "interrotto" && "border-red-500",
|
||||||
|
status === "scaduto" && "border-gray-500",
|
||||||
|
status === "completato" && "border-blue-500",
|
||||||
|
"transition-shadow hover:bg-muted/15 hover:shadow-md",
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="text-xl group-hover:underline">
|
||||||
|
{t.servizio.servizio_titolo} {servizio.tipologia}
|
||||||
|
</CardTitle>
|
||||||
|
<CardDescription className="">
|
||||||
|
{t.servizio.servizio_creato_il}{" "}
|
||||||
|
{servizio.created_at.toLocaleDateString("it-IT")}
|
||||||
|
</CardDescription>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="flex flex-col flex-wrap gap-4 sm:flex-row sm:justify-between">
|
||||||
|
<div
|
||||||
|
className={cn(
|
||||||
|
"flex items-center gap-2",
|
||||||
|
status === "attivo" && "text-green-500",
|
||||||
|
status === "interrotto" && "text-red-500",
|
||||||
|
status === "scaduto" && "text-gray-500",
|
||||||
|
status === "completato" && "text-blue-500",
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<StatusIcon className="size-5" />
|
||||||
|
|
||||||
|
<span>{t.servizio.status[status]}</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-2 rounded-md font-semibold text-muted-foreground group-hover:text-foreground">
|
||||||
|
<span>{t.servizio.vai_al_servizio}</span>
|
||||||
|
<MousePointerClick />
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
)}
|
||||||
</Link>
|
</Link>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue