feat: add className prop to AnnuncioDisplay and update ServizioContent for improved styling

This commit is contained in:
Marco Pedone 2026-01-09 14:47:28 +01:00
parent 76bcf640ca
commit d56d8f8ec8
3 changed files with 13 additions and 6 deletions

View file

@ -39,9 +39,11 @@ export const AnnuncioCard = ({
export const AnnuncioDisplay = ({
data,
confirming,
className,
}: {
data: AnnuncioRicerca;
confirming?: boolean;
className?: string;
}) => {
const { t } = useTranslation();
@ -50,6 +52,7 @@ export const AnnuncioDisplay = ({
className={cn(
"grid @md:grid-cols-[12rem_1fr] grid-cols-[7rem_1fr] gap-x-4 gap-y-2 rounded-md md:max-w-3xl md:border md:border-white md:bg-[#e6e9ec]/50 lg:gap-x-4 xl:gap-x-6 dark:md:border-primary dark:md:bg-card",
confirming && "xl:w-1/2",
className,
)}
>
<div className="row-span-1 md:row-span-3">

View file

@ -168,10 +168,11 @@ export const ServizioContent = () => {
Sono già stati selezionati {servizio.annunci.length} annunci
che potrebbero interessarti.
</p>
<div className="grid grid-cols-2 gap-4">
<div className="grid gap-4 sm:grid-cols-2">
{servizio.annunci.map((data) => (
<div className="" key={data.id}>
<AnnuncioDisplay
className="bg-[#e6e9ec]/50"
data={{
...data,
modificato_il: data.modificato_il
@ -185,7 +186,7 @@ export const ServizioContent = () => {
</div>
))}
{servizio.annunci.length % 2 === 1 && (
<div className="size-full rounded-md border border-[var(--pattern-fg)] bg-[repeating-linear-gradient(45deg,_var(--pattern-fg)_0,_var(--pattern-fg)_1px,_transparent_0,_transparent_50%)] bg-[size:10px_10px] bg-fixed opacity-10 [--pattern-fg:#696969] dark:[--pattern-fg:#e1e1e1]" />
<div className="hidden size-full rounded-md border border-[var(--pattern-fg)] bg-[repeating-linear-gradient(45deg,_var(--pattern-fg)_0,_var(--pattern-fg)_1px,_transparent_0,_transparent_50%)] bg-[size:10px_10px] bg-fixed opacity-10 [--pattern-fg:#696969] sm:block dark:[--pattern-fg:#e1e1e1]" />
)}
</div>
</div>

View file

@ -81,11 +81,14 @@ const Row = ({
)}
>
<CollapsibleTrigger className="flex w-full cursor-pointer items-center justify-between gap-4 px-3 sm:px-4">
<div className="flex items-center gap-2 font-semibold text-primary sm:text-lg">
<div className="flex items-center gap-2 font-semibold">
<Building className="size-6 fill-background" />
Affitto {servizio.tipologia}
<span className="text-muted-foreground text-sm">
{`- del ${servizio.created_at.toLocaleDateString("it")}`}
<span className="text-primary sm:text-lg">
Affitto {servizio.tipologia}
</span>
<span className="text-muted-foreground text-xs sm:text-sm">
{`${servizio.created_at.toLocaleDateString("it")}`}
</span>
</div>
<div className="float-end flex items-center justify-start pl-2 text-primary">