init

src/components/cover-image.tsx

@@ -0,0 +1,67 @@
+"use client";
+
+import { useState, type CSSProperties } from "react";
+import { CATEGORIES } from "@/lib/mock-data";
+import type { CategoryId } from "@/lib/types";
+import { Icons } from "./icons";
+
+export function CategoryTile({
+  category,
+  size = "sm",
+}: {
+  category: CategoryId;
+  size?: "sm" | "md" | "lg";
+}) {
+  const cat = CATEGORIES[category] || CATEGORIES.other;
+  const Icon = Icons[cat.icon as keyof typeof Icons];
+  const iconSize = { sm: 22, md: 28, lg: 40 }[size];
+  return (
+    <div
+      className="cat-tile"
+      style={{ ["--cat-color" as string]: cat.color } as CSSProperties}
+    >
+      <Icon size={iconSize} stroke={1.6} />
+    </div>
+  );
+}
+
+export function CoverImage({
+  src,
+  alt,
+  category,
+  style,
+}: {
+  src?: string | null;
+  alt?: string;
+  category: CategoryId;
+  style?: CSSProperties;
+}) {
+  const [err, setErr] = useState(false);
+  if (!src || err) {
+    return (
+      <div
+        className="cover-fallback"
+        style={
+          {
+            ...style,
+            "--cat-color": (CATEGORIES[category] || CATEGORIES.other).color,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+          } as CSSProperties
+        }
+      >
+        <CategoryTile category={category} size="md" />
+      </div>
+    );
+  }
+  return (
+    // eslint-disable-next-line @next/next/no-img-element
+    <img
+      src={src}
+      alt={alt}
+      onError={() => setErr(true)}
+      style={{ objectFit: "cover", ...style }}
+    />
+  );
+}