Collection Card

1// Collection tile → links to /collection/:slug. Styled with base44 design tokens (shadcn Tailwind
2// classes) — re-skin via the app's design tokens (src/index.css :root/.dark), not this JSX. The
3// `//`-protocol image fix and the coverImage.imageInfo.url field path are load-bearing.
4import { Link } from "react-router-dom";
5
6function coverUrl(collection) {
7  const url = collection?.coverImage?.imageInfo?.url;
8  return url ? (url.startsWith("//") ? `https:${url}` : url) : null;
9}
10
11export default function CollectionCard({ collection }) {
12  const image = coverUrl(collection);
13
14  return (
15    <Link to={`/collection/${collection.slug}`}
16      className="flex flex-col no-underline text-foreground bg-card border border-border rounded-lg overflow-hidden shadow-sm">
17      <div className="aspect-[4/3] bg-background">
18        {image
19          ? <img src={image} alt={collection.title} loading="lazy"
20              className="w-full h-full object-cover" />
21          : <div className="w-full h-full bg-muted flex items-center justify-center" aria-hidden="true"><svg viewBox="0 0 24 24" className="w-8 h-8 text-muted-foreground/40" fill="none" stroke="currentColor" strokeWidth="1.5"><rect x="3" y="3" width="18" height="18" rx=
22      </div>
23      <div className="p-3 flex flex-col gap-1">
24        <h3 className="m-0 font-display text-base font-semibold">{collection.title}</h3>
25        {collection.description && (
26          <p className="m-0 text-muted-foreground text-sm leading-normal">{collection.description}</p>
27        )}
28      </div>
29    </Link>
30  );
31}