Marco/infoalloggi-monorepo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 6 Wiki Activity Actions

feat: enhance RinnovoLinkCard and ServizioLinkCard components with improved styling and status handling

Browse source
This commit is contained in:
Marco Pedone 2026-03-19 12:14:11 +01:00
parent 9187e8964f
commit c6b462a54d
1 changed files with 68 additions and 46 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

114
apps/infoalloggi/src/components/servizio/servizio.tsx
View file

@ -124,7 +124,7 @@ const RinnovoLinkCard = ({
className={cn("transition-shadow hover:bg-muted/15 hover:shadow-md")}
>
<CardHeader>
<CardTitle className="group-hover:underline">
<CardTitle className="text-xl group-hover:underline">
Rinnovo {data.codice}
</CardTitle>
<CardDescription className="">
@ -185,52 +185,74 @@ const ServizioLinkCard = ({
}
key={servizio.servizio_id}
>
<Card
className={cn(
status === "attivo" && "border-green-500",
status === "in_attesa" &&
"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",
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="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" />
{status === "in_attesa" ? (
<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">
<span className="absolute top-5 right-5 -mt-1 -mr-1 flex size-7 items-center justify-center">
<span className="absolute inline-flex size-6 h-full w-full animate-ping rounded-full bg-white opacity-75" />
<span className="relative inline-flex size-5 rounded-full bg-white"></span>
</span>
<span>{t.servizio.status[status]}</span>
</div>
<div
className={cn(
"flex items-center gap-2 rounded-md text-muted-foreground group-hover:text-foreground",
status === "in_attesa" && "animate-bounce text-white",
)}
>
<span>{t.servizio.vai_al_servizio}</span>
<MousePointerClick />
</div>
</CardContent>
</Card>
<CardHeader>
<CardTitle className="text-xl group-hover:underline">
{t.servizio.servizio_titolo} {servizio.tipologia}
</CardTitle>
<CardDescription className="text-white">
{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="flex items-center gap-2">
<StatusIcon className="size-5" />
<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>
);
};