spb/lou-ka Public

1// -----------------------------------------------------------------------------2// Lou-Ka — Agrégateur de logements à louer (province de Québec)3// Auteur : Simon-Pierre Boucher — contact@spboucher.ai4// components/ListingCard.tsx : carte d'annonce (grille de résultats)5// -----------------------------------------------------------------------------6import { Link } from "react-router-dom";7import { Listing, fmtPrice, sourceName } from "../api";89export default function ListingCard({ l }: { l: Listing }) {10  const img = l.images && l.images.length > 0 ? l.images[0] : null;11  return (12    <Link to={`/logement/${encodeURIComponent(l.uid)}`} className="card">13      <div className="card-img">14        {img ? (15          <img src={img} alt={l.title} loading="lazy" />16        ) : (17          <div className="noimg">🏠</div>18        )}19        {l.unit_type && <span className="badge type">{l.unit_type}</span>}20        {l.images.length > 1 && (21          <span className="badge right">📷 {l.images.length}</span>22        )}23      </div>24      <div className="card-body">25        <div className="card-price">26          {fmtPrice(l.price, l.price_label)} {l.price != null && <small>/ mois</small>}27        </div>28        <div className="card-title">{l.title || l.address}</div>29        <div className="card-meta">30          {l.sector && <span>{l.sector}</span>}31          {l.sector && l.city && <span className="sep" />}32          {l.city && <span>{l.city}</span>}33        </div>34        <div className="card-foot">35          <span className="source-tag">{sourceName(l.source)}</span>36          {l.availability && <span className="avail">{l.availability}</span>}37        </div>38      </div>39    </Link>40  );41}42