import { BedDouble, CalendarClock, MapPin, Maximize2, Ruler, Siren, Star, TrafficCone, } from "lucide-react"; import Image from "next/image"; import Link from "next/link"; import { useState } from "react"; import { ImageFlbk } from "~/components/ImageWithFallback"; import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious, } from "~/components/ui/carousel"; import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, } from "~/components/ui/dialog"; import { camereTesti, handleConsegna } from "~/lib/annuncio_details"; import { cn, formatCurrency } from "~/lib/utils"; import { useTranslation } from "~/providers/I18nProvider"; import type { AnnuncioRicerca } from "~/server/controllers/annunci.controller"; import { Badge } from "./ui/badge"; import { VideoPlayer } from "./videoPlayer"; type CardAnnuncioProps = AnnuncioRicerca & { className?: string; noLink?: boolean; onlyFirstImage?: boolean; }; export const CardAnnuncio = ({ id, codice, prezzo, titolo_it, titolo_en, mq, comune, provincia, consegna, numero_camere: camere, tipo, stato, className, url_video: videos, updated_at, images, homepage, noLink = false, onlyFirstImage = false, }: CardAnnuncioProps) => { const { t, locale } = useTranslation(); const currentMonth = new Date().getMonth() + 1; const isAvailableNow = consegna === 0 || consegna === currentMonth; const Wrapper = ({ children }: { children: React.ReactNode }) => { if (noLink) { return
{children}
; } return ( {children} ); }; return (
{stato !== "Trattativa" && homepage && (
svg]:size-4.5", isAvailableNow ? "bg-green-500" : "bg-blue-500", )} > {isAvailableNow ? ( <> Disponibile Subito ) : ( <> In Evidenza )}
)} {stato === "Trattativa" && (
svg]:size-4.5", )} > In Trattativa
)} {!onlyFirstImage ? ( {images?.map((img, idx) => ( ))} {videos?.map((video) => { if (!video) return null; if (video.includes("youtu")) { return null; } return ( { e.preventDefault(); e.stopPropagation(); }} > ); })}
{ e.preventDefault(); e.stopPropagation(); }} onKeyDown={(e) => e.stopPropagation()} role="button" tabIndex={0} > { e.preventDefault(); e.stopPropagation(); // Add this to the buttons too }} /> { e.preventDefault(); e.stopPropagation(); // Add this to the buttons too }} />
) : ( <> {images && images.length > 0 && images[0] ? ( ) : (
)} )}
Affitto {tipo}
{t.card.codice} Cod: {codice}
{t.card.prezzo} {formatCurrency(prezzo / 1e2)}
{t.card.titolo} {locale === "it" ? titolo_it : titolo_en}
{t.card.indirizzo} {comune && provincia && `${comune} (${provincia})`}

{mq ? Number.parseFloat(mq) : 0}{" "} m2

{camereTesti({ camere: camere, testi: t.card })}

{handleConsegna({ aggiornamento: t.card.in_aggiornamento, consegna: consegna, consegna_da: t.card.consegna_da, mesi: t.preferenze.mesi, subito: t.card.consegna_subito, })}

); }; export const CarouselAnnuncio = ({ single, immagini, videos, updated_at, }: { single?: boolean; immagini: string[] | null; videos: string[] | null; updated_at: Date | null; }) => { const [openModal, setOpenModal] = useState(false); const [idxModal, setIdxModal] = useState(0); function handleOpenModal(position: number) { setIdxModal(position); setOpenModal(true); } return ( <>
{immagini?.map((img, idx) => ( handleOpenModal(idx)} priority={idx === 0} src={`/storage-api/get/${img}?image=true&${updated_at?.toString() || new Date().toString()}`} width={800} /> handleOpenModal(idx)} /> ))} {videos?.map((video, idx) => { if (!video) return null; if (video.includes("youtu")) { return null; } return ( handleOpenModal(immagini?.length || 0 + idx) } /> ); })}
Image Dialog Immagine {immagini?.map((img, idx) => ( {`carousel-img-${idx}`} ))} {videos?.map((video) => { if (!video) return null; if (video.includes("youtu")) { return null; } return ( ); })} ); };