feat: update layout and styling in UserDashboard and ServizioPage components

This commit is contained in:
Marco Pedone 2026-03-06 18:54:48 +01:00
parent b32ebf9fde
commit 6211be289c
5 changed files with 24 additions and 15 deletions

View file

@ -66,7 +66,7 @@ export const UserDashboard = ({ userId }: { userId: UsersId }) => {
if (isLoading) return <LoadingPage />;
return (
<div className="mt-2 flex w-full flex-1 flex-col items-start justify-center gap-4 overflow-auto p-2 md:gap-6">
<div className="flex w-full flex-1 flex-col items-start justify-center gap-4 overflow-auto p-2 md:gap-6">
<h3 className="font-bold text-2xl">Le tue ricerche</h3>
<div className="flex w-full flex-1 grow flex-col space-y-5">

View file

@ -5,6 +5,7 @@ import {
CircleCheck,
CircleCheckBig,
CircleMinus,
Clock,
ClockFading,
type LucideIcon,
PackageCheck,
@ -58,9 +59,9 @@ export const ServizioList = ({
</div>
);
}
if (servizi.length === 1 && servizi[0]) {
return <Servizio isAdmin={isAdmin} servizio={servizi[0]} userId={userId} />;
}
// if (servizi.length === 1 && servizi[0]) {
// return <Servizio isAdmin={isAdmin} servizio={servizi[0]} userId={userId} />;
// }
return (
<div className="flex flex-col gap-4">
{servizi.map((servizio) => (
@ -198,11 +199,18 @@ const Content = () => {
return (
<div className="w-full space-y-4">
<div className="flex flex-col flex-wrap items-start justify-between gap-4 sm:flex-row">
<div>
<div className="flex flex-col gap-1">
<h3 className="font-semibold text-xl">
{t.servizio.servizio_titolo} {servizio.tipologia}
</h3>
<div className="flex items-center gap-2 text-muted-foreground text-sm">
<Clock className="size-5" />
<span>
Creato il: {servizio.created_at.toLocaleDateString("it-IT")}
</span>
</div>
<div className="flex flex-wrap items-center gap-2 text-muted-foreground text-sm">
<div className="flex items-center gap-2">
<CalendarClock className="size-5" />

View file

@ -118,14 +118,15 @@ export const ServizioPacksInfos = () => {
<Collapsible className="flex flex-col gap-2">
<CollapsibleTrigger asChild>
<Button
className="h-fit w-fit flex-wrap items-center py-1"
className="h-fit w-full flex-wrap items-center justify-start py-1 sm:w-fit sm:justify-center"
size="sm"
variant="outline"
>
<Euro className="size-5" />
<h3 className="font-semibold text-lg">{t.servizio.prezzi.title}</h3>
<ChevronDown className="size-4" />
<ChevronDown className="ml-auto size-4 sm:ml-0" />
</Button>
</CollapsibleTrigger>
<CollapsibleContent className="flex flex-col gap-2">

View file

@ -696,8 +696,8 @@ export const it: LangDict = {
areaRiservataUserNav: [
{
href: "/area-riservata/dashboard",
icon: "dashboard",
title: "Dashboard",
icon: "search",
title: "Servizi di ricerca",
},
{
href: "/area-riservata/comunicazioni",
@ -760,8 +760,8 @@ export const it: LangDict = {
loginMenuUser: [
{
href: "/area-riservata/dashboard",
icon: { className: "", icon: "dashboard" },
title: "Dashboard",
icon: { className: "", icon: "search" },
title: "Servizi di ricerca",
},
{
href: "/area-riservata/comunicazioni",

View file

@ -35,17 +35,17 @@ const ServizioPage: NextPageWithLayout<ServizioPageProps> = ({
return <Status500 />;
}
return (
<div className="mt-2 flex w-full flex-1 flex-col items-start justify-center gap-4 overflow-auto p-2 md:gap-6">
<div className="flex w-full flex-col gap-4">
<div className="flex w-full flex-1 flex-col items-start justify-center gap-3 overflow-auto p-2 md:gap-6">
<div className="flex w-full flex-col gap-2">
<div className="flex w-full items-center justify-between">
<h3 className="font-semibold text-2xl">
<h3 className="font-semibold text-xl">
{t.servizio.dettaglio_servizio}
</h3>
<Link href="/area-riservata/dashboard">
<Button size="sm" variant="outline">
<ArrowRight className="size-4" />
{t.servizio.torna_alla_dashboard}
<span>lista servizi</span>
</Button>
</Link>
</div>