spb/auto-ka Public

1// -----------------------------------------------------------------------------2// Auto-Ka — Agrégateur de voitures usagées à vendre (province de Québec)3// Auteur : Simon-Pierre Boucher — contact@spboucher.ai4// VehicleCard.tsx : carte véhicule de la grille de résultats5// -----------------------------------------------------------------------------6import { Link } from "react-router-dom";7import { Vehicle, fmtKm, fmtPrice } from "../api";89export default function VehicleCard({ v }: { v: Vehicle }) {10  const chips = [11    v.mileage_km != null ? fmtKm(v.mileage_km) : null,12    v.transmission || null,13    v.fuel || null,14    v.body_type || null,15    v.drivetrain || null,16  ].filter(Boolean) as string[];1718  return (19    <Link to={`/vehicule/${encodeURIComponent(v.uid)}`} className="vcard">20      <div className="photo">21        {v.images.length > 0 ? (22          <img src={v.images[0]} alt={v.title} loading="lazy" />23        ) : (24          <div className="nopic" aria-hidden="true">🚗</div>25        )}26        {v.year != null && <span className="year-chip">{v.year}</span>}27      </div>28      <div className="body">29        <h3>{v.title}</h3>30        <div className="price">31          {fmtPrice(v.price)}32          {v.details?.price_from ? <small> à partir de</small> : null}33        </div>34        <div className="specs">35          {chips.slice(0, 4).map((c) => (36            <span key={c} className="spec-chip">{c}</span>37          ))}38        </div>39        <div className="foot">40          <span>{v.dealer_name || v.source}</span>41          <span>{v.city}</span>42        </div>43      </div>44    </Link>45  );46}47