feat: add className prop to AnnuncioDisplay and update ServizioContent for improved styling
This commit is contained in:
parent
76bcf640ca
commit
d56d8f8ec8
3 changed files with 13 additions and 6 deletions
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue