spb/rent-ka

1// -----------------------------------------------------------------------------2// Rent-Ka — Rental listings aggregator (Canada, outside Québec)3// Author: Simon-Pierre Boucher — contact@spboucher.ai4// components/SmartImg.tsx: robust image — optimized WebP thumbnail first,5//   fallback to the original URL if the thumbnail is not (yet) available,6//   then to the Rent-Ka fallback visual. Never a broken-image icon.7// -----------------------------------------------------------------------------8import { ImgHTMLAttributes, useEffect, useState } from "react";9import { placeholderImage, thumb } from "../api";1011type Props = Omit<ImgHTMLAttributes<HTMLImageElement>, "src"> & {12  src: string | null | undefined;   // original source URL13  width_?: 160 | 480 | 800 | 1280;  // desired thumbnail width14  fallbackLabel?: string;           // fallback visual label (e.g. "2 bedrooms")15  original?: boolean;               // true = no thumbnail (full size)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