flags

app/components/Flag.tsx

@@ -0,0 +1,29 @@
+"use client";
+
+import { Team } from "@/lib/types";
+
+// Zeigt die Flagge/das Wappen eines Teams. Fällt auf ein neutrales Rund
+// zurück, wenn keine crest-URL vorliegt. SVG-Crests (football-data) skalieren
+// sauber; das Rendern als rundes Bild gibt den Flaggen-Look aus dem Screenshot.
+export default function Flag({
+  team, size = 22,
+}: { team?: Team; size?: number }) {
+  const style = { width: size, height: size } as const;
+  if (team?.crest) {
+    return (
+      <img
+        src={team.crest}
+        alt={team.code || team.name}
+        className="flag"
+        style={style}
+        loading="lazy"
+      />
+    );
+  }
+  // Fallback: Kreis mit Ländercode
+  return (
+    <span className="flag flag-fallback" style={style} aria-hidden>
+      {team?.code?.slice(0, 2) || "··"}
+    </span>
+  );
+}