Aurora ComponentCard

1"use client";
2 
3import * as React from "react";
4import { ChevronDown, ChevronLeft, ChevronRight, Columns2, ExternalLink } from "lucide-react";
5import { Button } from "@/registry/aurora/ui/button";
6import { cn } from "@/lib/utils";
7 
8// ---------------------------------------------------------------------------
9// Types
10// ---------------------------------------------------------------------------
11 
12/**
13 * A tag rendered in the card footer. A plain string renders as a neutral
14 * outline pill; `{ label, accent: true }` renders as a filled cyan pill.
15 */
16export type ComponentCardTag = string | { label: string; accent?: boolean };
17 
18export interface ComponentCardProps
19  extends Omit<React.HTMLAttributes<HTMLDivElement>, "title" | "onClick"> {
20  /** Component display name shown as the card heading. */
21  name: string;
22  /** Short one/two-line description. */
23  blurb?: React.ReactNode;
24  /** Footer tags. Strings → neutral pills; `{accent:true}` → cyan pill. */
25  tags?: ComponentCardTag[];
26  /** Live preview rendered inside the thumbnail / stage. */
27  preview?: React.ReactNode;
28  /** Height (px) of the preview thumb / stage. */
29  thumbHeight?: number;
30  /** `"tile"` = gallery grid tile (default). `"viewer"` = focused viewer. */
31  variant?: "tile" | "viewer";
32 
33  // --- tile ---------------------------------------------------------------
34  /** Tile only: invoked when the open affordance (or the tile) is activated. */
35  onOpen?: () => void;
36 
37  // --- viewer -------------------------------------------------------------
38  /** Viewer only: zero-based index of the current entry. */
39  index?: number;
40  /** Viewer only: total number of entries (for the `n / N` counter). */
41  total?: number;
42  /** Viewer only: sibling names powering the jump dropdown. */
43  siblings?: string[];
44  /** Viewer only: go to previous entry. */
45  onPrev?: () => void;
46  /** Viewer only: go to next entry. */
47  onNext?: () => void;
48  /** Viewer only: jump directly to a named sibling. */
49  onJump?: (name: string) => void;
50  /** Viewer only: preview node for the compare slot. */
51  comparePreview?: React.ReactNode;
52  /** Viewer only: name of the compare target. */
53  compareName?: string;
54 
55  className?: string;
56}
57 
58// ---------------------------------------------------------------------------
59// Shared bits
60// ---------------------------------------------------------------------------
61 
62function Thumb({
63  height,
64  children,
65  rounded,
66}: {
67  height: number;
68  children?: React.ReactNode;
69  rounded: string;
70// … truncated