129 lines
3.8 KiB
TypeScript
129 lines
3.8 KiB
TypeScript
import Image from "next/image";
|
|
import { AnnuncioActions } from "~/components/servizio/annuncio_actions";
|
|
import { Interactions } from "~/components/servizio/interactions";
|
|
import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/card";
|
|
import { handleConsegna } from "~/lib/annuncio_details";
|
|
import { getStorageUrl } from "~/lib/storage_utils";
|
|
import { cn, formatCurrency } from "~/lib/utils";
|
|
import { useTranslation } from "~/providers/I18nProvider";
|
|
import { useServizioAnnuncio } from "~/providers/ServizioProvider";
|
|
import type { AnnuncioRicerca } from "~/server/controllers/annunci.controller";
|
|
import { AnnuncioDettaglio, TipoBadge } from "./annuncio_dettaglio";
|
|
|
|
export const AnnuncioCard = ({
|
|
className,
|
|
confirming,
|
|
}: {
|
|
className?: string;
|
|
confirming?: boolean;
|
|
}) => {
|
|
const { data } = useServizioAnnuncio();
|
|
|
|
return (
|
|
<BasicAnnuncioCard
|
|
actions={<AnnuncioActions />}
|
|
className={className}
|
|
confirming={confirming}
|
|
data={{
|
|
...data,
|
|
modificato_il: data.modificato_il ? new Date(data.modificato_il) : null,
|
|
media_updated_at: data.media_updated_at
|
|
? new Date(data.media_updated_at)
|
|
: null,
|
|
}}
|
|
interactions={<Interactions />}
|
|
/>
|
|
);
|
|
};
|
|
export const BasicAnnuncioCard = ({
|
|
actions,
|
|
interactions,
|
|
className,
|
|
data,
|
|
confirming,
|
|
}: {
|
|
actions?: React.ReactNode;
|
|
interactions?: React.ReactNode;
|
|
className?: string;
|
|
data: AnnuncioRicerca;
|
|
confirming?: boolean;
|
|
}) => {
|
|
const { t } = useTranslation();
|
|
|
|
return (
|
|
<Card className={cn("w-full gap-2 border-white py-3", className)}>
|
|
<CardHeader className="flex flex-row flex-wrap items-center justify-between space-y-0 px-3 pb-2">
|
|
<CardTitle className="text-2xl">Annuncio {data.codice}</CardTitle>
|
|
{actions}
|
|
</CardHeader>
|
|
<CardContent className="px-3">
|
|
<div
|
|
className={cn(
|
|
"@container flex w-full flex-col gap-4",
|
|
confirming && "xl:flex-row xl:gap-6",
|
|
)}
|
|
id="container"
|
|
>
|
|
<div
|
|
className={cn(
|
|
"grid @md:grid-cols-[12rem_1fr] grid-cols-[6rem_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-6 xl:gap-x-8 dark:md:border-primary dark:md:bg-card",
|
|
confirming && "xl:w-1/2",
|
|
)}
|
|
>
|
|
<div className="row-span-1 md:row-span-3">
|
|
<Image
|
|
alt={data.codice}
|
|
className="size-24 rounded-md bg-[#e6e9ec] object-cover md:size-48"
|
|
height={1080}
|
|
priority
|
|
src={
|
|
(data?.images[0] &&
|
|
getStorageUrl({
|
|
storageId: data.images[0].img,
|
|
params: {
|
|
cacheKey: data.media_updated_at?.toISOString(),
|
|
media: "image",
|
|
},
|
|
})) ||
|
|
"/fallback-image.png"
|
|
}
|
|
width={1920}
|
|
/>
|
|
</div>
|
|
|
|
<div className="col-span-1 flex w-full max-w-xl flex-wrap gap-5 md:col-span-1 md:mt-4 md:pr-8">
|
|
<span className="text-wrap">{data.titolo_it}</span>
|
|
</div>
|
|
|
|
<div className="col-span-2 flex w-full max-w-xl items-center justify-between gap-2 md:col-span-1 md:pr-8">
|
|
<TipoBadge mini tipo={data.tipo} />
|
|
<span className="max-w-auto truncate">
|
|
{handleConsegna({
|
|
aggiornamento: t.card.in_aggiornamento,
|
|
consegna: data.consegna,
|
|
consegna_da: t.card.consegna_da,
|
|
mesi: t.parametri.mesi,
|
|
subito: t.card.consegna_subito,
|
|
})}
|
|
</span>
|
|
<span className="font-semibold">
|
|
{formatCurrency(data.prezzo / 1e2)}
|
|
</span>
|
|
</div>
|
|
<div className="col-span-2 w-full max-w-xl md:col-span-1 md:pr-8">
|
|
<AnnuncioDettaglio data={data} />
|
|
</div>
|
|
</div>
|
|
<div
|
|
className={cn(
|
|
"flex w-full flex-col gap-4",
|
|
confirming && "xl:w-1/2",
|
|
)}
|
|
>
|
|
{interactions}
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
};
|