Photo Contact Sheet

1
2
3
4
5
6
import { type ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";
 
export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
import Image from "next/image";
import { forwardRef, type ComponentPropsWithoutRef } from "react";
 
import { cn } from "@/lib/cn";
 
export type ContactSheetFrame = {
  src: string;
  number: string;
};
 
export type PhotoContactSheetCardProps = Readonly<
  {
    rollLabel?: string;
    frames?: ContactSheetFrame[];
  } & ComponentPropsWithoutRef<"div">
>;
 
const defaultFrames: ContactSheetFrame[] = [
  { src: "/wallpaper-15.png", number: "01" },
  { src: "/wallpaper-3.png", number: "03" },
  { src: "/wallpaper-11.png", number: "04" },
  { src: "/wallpaper-2.png", number: "02" },
];
 
// Production-ready Photo Contact Sheet component — styled with Tailwind CSS.
export const PhotoContactSheetCard = forwardRef<
  HTMLDivElement,
  PhotoContactSheetCardProps
>(
  (
    {
      className,
      rollLabel = "Contact sheet — Roll 12A",
      frames = defaultFrames,
      ...props
    },
    ref,
  ) => (
    <div
      ref={ref}
      data-slot="photo-contact-sheet-card"
      className={cn("w-xs bg-neutral-100 p-3 font-mono", className)}
      {...props}
    >
      <p className="mb-2 text-[9px] tracking-wider text-neutral-500 uppercase">
        {rollLabel}
      </p>
      <div className="grid grid-cols-2 gap-2">
        {frames.map((frame) => (
          <div
            key={frame.number}
            className="group relative aspect-4/5 overflow-hidden border border-neutral-300 bg-white"
          >
            <Image
              src={frame.src}
              alt={`Frame ${frame.number}`}
              fill
              sizes="160px"
              className="object-cover transition-transform duration-500 group-hover:scale-105"
            />
            <span className="absolute top-1 left-1 bg-white/90 px-1 py-px text-[8px] font-bold text-neutral-800">
              {frame.number}
            </span>
          </div>
        ))}
      </div>
    </div>
  ),
);
 
PhotoContactSheetCard.displayName = "PhotoContactSheetCard";