Archive Record Cards

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its button, media-slot, avatar, avatar-initials dependencies and any missing npm packages, and installs them straight into your project.

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/gallery/gallery3.tsx instead.

Usage

The file also exports gallery3Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Gallery3, gallery3Demo } from "@/components/blocks/gallery/gallery3";

export default function Page() {
  return <Gallery3 {...gallery3Demo} />;
}

Props

Types

type ArchiveRecord = {
  refNumber: string;
  title: string;
  year: string;
  image: { src: string; alt: string };
  acquisition: string;
  condition: string;
  storage: string;
  catalogedBy: string;
};

Behavior notes

• The card flip is real client state (useState boolean) driving an actual `[transform:rotateY(180deg)]` on a `[transform-style:preserve-3d]` wrapper, with both faces set to `[backface-visibility:hidden]` so only one side is ever visible at a time, not a fake opacity cross-fade.
• Prev/next navigation between records is real state, wired to on-screen buttons and the Escape/ArrowLeft/ArrowRight keys; changing records always resets the flip back to the front face.
• The registrar's initials avatar is generated from `catalogedBy` at render time via a small pure helper, not a real uploaded photo.