spb/lou-ka

1// -----------------------------------------------------------------------------2// Lou-Ka — Agrégateur de logements à louer (province de Québec)3// Auteur : Simon-Pierre Boucher — contact@spboucher.ai4// components/SmartImg.tsx : image robuste — miniature WebP optimisée d'abord,5//   repli sur l'URL originale si la miniature n'est pas (encore) disponible,6//   puis sur le visuel de secours Lou-Ka. Jamais d'icône d'image cassée.7// -----------------------------------------------------------------------------8import { ImgHTMLAttributes, useEffect, useState } from "react";9import { placeholderImage, thumb } from "../api";1011type Props = Omit<ImgHTMLAttributes<HTMLImageElement>, "src"> & {12  src: string | null | undefined;   // URL originale de la source13  width_?: 160 | 480 | 800 | 1280;  // largeur de miniature souhaitée14  fallbackLabel?: string;           // étiquette du visuel de secours (ex. « 3½ »)15  original?: boolean;               // true = pas de miniature (pleine taille)16};1718export default function SmartImg({ src, width_ = 480, fallbackLabel,19                                   original = false, ...rest }: Props) {20  const chain = src21    ? (original ? [src] : [thumb(src, width_), src])22    : [];23  const [step, setStep] = useState(0);24  useEffect(() => { setStep(0); }, [src, width_]);25  const url = step < chain.length ? chain[step] : placeholderImage(fallbackLabel);26  return (27    <img28      {...rest}29      src={url}30      onError={() => setStep((s) => s + 1)}31    />32  );33}34