Image card

import * as React from "react";
import Link from "next/link";
import { Card, CardContent } from "@/components/ui/card";
import { cn } from "@/lib/utils";

type Aspect = "video" | "square" | "4/3";

type ImageCardProps = Omit<React.ComponentProps<typeof Card>, "children" | "title"> & {
  /** What fills the media slot: an img, a video, a demo. Falls back to a hairline pattern. */
  media?: React.ReactNode;
  /** The caption under the media. */
  title: string;
  /** One quiet mono line under the title: a date, a size, a credit. */
  meta?: string;
  /** Makes the title a link. Passed to next/link. */
  href?: React.ComponentProps<typeof Link>["href"];
  /** Shape of the media slot. */
  aspect?: Aspect;
};

const ASPECT = { video: "aspect-video", square: "aspect-square", "4/3": "aspect-4/3" } as const;

/**
 * Media on top, a caption and a mono meta line below.
 * The media slot keeps its aspect ratio and clips whatever is inside to it.
 */
export function ImageCard({ media, title, meta, href, aspect = "video", className, ...props }: ImageCardProps) {
  return (
    <Card data-slot="image-card" size="sm" className={cn("gap-3 pt-0", className)} {...props}>
      <div
        data-slot="image-card-media"
        className={cn(
          "w-full overflow-hidden bg-muted [&_img]:size-full [&_img]:object-cover [&_video]:size-full [&_video]:object-cover",
          ASPECT[aspect],
        )}
      >
        {media ?? (
          <div
            aria-hidden="true"
            className="size-full bg-[repeating-linear-gradient(135deg,var(--border)_0,var(--border)_1px,transparent_1px,transparent_10px)]"
          />
        )}
      </div>
      <CardContent className="flex flex-col gap-0.5">
        <p className="m-0 truncate text-sm font-medium text-foreground">
          {href ? (
            <Link
              href={href}
              className="rounded-sm transition-colors duration-100 ease-out outline-none hover:text-foreground/85 focus-visible:ring-2 focus-visible:ring-ring/50"
            >
              {title}
            </Link>
          ) : (
            title
          )}
        </p>
        {meta && <p className="m-0 truncate font-mono text-xs text-muted-foreground">{meta}</p>}
      </CardContent>
    </Card>
  );
}