"use client"; import { Children, isValidElement, type CSSProperties } from "react"; import { cn } from "@/lib/utils"; export type ShowcaseBackground = "dots" | "grid" | "none"; export type ShowcaseProps = { /** Small uppercase label rendered above the frame. */ label?: string; /** Code-styled caption rendered below the frame. */ source?: string; /** Muted secondary caption below the source. */ note?: string; /** Backdrop pattern. Defaults to "dots". */ background?: ShowcaseBackground; className?: string; children?: React.ReactNode; }; const BACKGROUNDS: Record = { none: {}, // Opacity matches the _detail.tsx outer preview wrapper so nested/sibling // Showcases read as the same visual primitive. dots: { backgroundImage: "radial-gradient(rgba(255,255,255,0.18) 1px, transparent 1px)", backgroundSize: "14px 14px", }, grid: { backgroundImage: "linear-gradient(rgba(255,255,255,0.18) 0.5px, transparent 0.5px), linear-gradient(90deg, rgba(255,255,255,0.18) 0.5px, transparent 0.5px)", backgroundSize: "24px 24px", }, }; export function Showcase({ label, source, note, background = "dots", className, children, }: ShowcaseProps) { // If any direct child is a , stack rows vertically. Otherwise wrap // every child in one implicit Row so bare-component children still center. const hasRow = Children.toArray(children).some( (c) => isValidElement(c) && c.type === Row, ); return (

{label && (

{label}

)}

{hasRow ? children : {children}}

{source && (


          {source}

)} {note &&

{note}

}

); } export type RowProps = { children?: React.ReactNode; className?: string; }; export function Row({ children, className }: RowProps) { return (

{children}

); }

showcase.