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

feat: replace Accordion with Collapsible for pricing component; improve UI interaction

Browse source
This commit is contained in:
Marco Pedone 2026-01-12 17:08:27 +01:00
parent ff3af6541c
commit dec6aff651
2 changed files with 36 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
apps/infoalloggi/src/components/prezzi.tsx
View file

@ -138,7 +138,7 @@ export const PricingComponent = ({
}; };
return ( return (
<Card className={cn("w-full max-w-xl gap-4 py-4", className)}> <Card className={cn("w-full max-w-xl gap-4 rounded-md py-4", className)}>
<CardHeader className="py-2"> <CardHeader className="py-2">
<CardTitle className="pt-1 text-center font-semibold text-3xl"> <CardTitle className="pt-1 text-center font-semibold text-3xl">
{title} {title}

32
apps/infoalloggi/src/pages/annuncio/[cod].tsx
View file

@ -38,6 +38,11 @@ import {
} from "~/components/ui/accordion"; } from "~/components/ui/accordion";
import { Button } from "~/components/ui/button"; import { Button } from "~/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/card"; import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/card";
import {
Collapsible,
CollapsibleContent,
CollapsibleTrigger,
} from "~/components/ui/collapsible";
import { import {
Dialog, Dialog,
DialogContent, DialogContent,
@ -329,15 +334,23 @@ const Pricing = ({
); );
} }
return ( return (
<Accordion className="w-full" collapsible type="single"> <Collapsible className="w-full">
<AccordionItem value="item-1"> <CollapsibleTrigger asChild>
<AccordionTrigger className="items-center"> <Button
<div className="items-cernter flex justify-start gap-2 px-1 font-semibold text-xl"> className={cn(
<BadgeEuro /> "w-full text-white",
tipologia === TipologiaPosizioneEnum.Transitorio
? "bg-transitorio"
: "bg-stabile",
)}
>
<div className="flex items-center gap-2">
<BadgeEuro className="size-5" />
<span>{t.pricing_cmp.cta_costo}</span> <span>{t.pricing_cmp.cta_costo}</span>
</div> </div>
</AccordionTrigger> </Button>
<AccordionContent className="flex justify-center"> </CollapsibleTrigger>
<CollapsibleContent className="mt-2">
<PricingComponent <PricingComponent
className={cn(style)} className={cn(style)}
cta={cta} cta={cta}
@ -351,9 +364,8 @@ const Pricing = ({
: t.prezzi.titolo_stabile : t.prezzi.titolo_stabile
} }
/> />
</AccordionContent> </CollapsibleContent>
</AccordionItem> </Collapsible>
</Accordion>
); );
}; };