SPB Git

spb/food-ka Public

Food-Ka — agrégateur de produits d'épicerie du Québec — www.food-ka.com

Python 57.7% TypeScript 24.9% CSS 16.7% HTML 0.6%
1.8 KB · 53 lines tsx
Raw Blame History
1// -----------------------------------------------------------------------------2// Food-Ka — Agrégateur de produits d'épicerie (province de Québec)3// Auteur : Simon-Pierre Boucher — contact@spboucher.ai4// components/SourceLogo.tsx : logo de bannière (frontend/public/logos/<id>.png)5//   Vignette arrondie sur fond blanc + nom optionnel (court ou complet).6//   Logo introuvable : repli sur la pastille texte historique (ou rien).7// -----------------------------------------------------------------------------8import { useState } from "react";9import { sourceName, sourceShort } from "../api";1011interface SourceLogoProps {12  source: string;13  /** Côté du logo en px (défaut 22). */14  size?: number;15  /** Libellé affiché à côté du logo. */16  name?: "none" | "short" | "full";17  /** Comportement quand le PNG n'existe pas : pastille texte ou rien. */18  fallback?: "chip" | "hide";19  className?: string;20}2122export default function SourceLogo({23  source,24  size = 22,25  name = "none",26  fallback = "chip",27  className = "",28}: SourceLogoProps) {29  // mémorise l'id dont le logo a échoué (résiste au changement de `source`)30  const [failedFor, setFailedFor] = useState<string | null>(null);31  const failed = failedFor === source;3233  if (failed) {34    if (fallback === "hide") return null;35    return <span className={`source-tag ${className}`}>{sourceName(source)}</span>;36  }3738  const label = name === "full" ? sourceName(source) : sourceShort(source);39  return (40    <span className={`src-logo ${className}`} title={sourceName(source)}>41      <img42        src={`/logos/${source}.png`}43        alt={name === "none" ? sourceName(source) : ""}44        width={size}45        height={size}46        loading="lazy"47        onError={() => setFailedFor(source)}48      />49      {name !== "none" && <span className="src-logo-name">{label}</span>}50    </span>51  );52}53