50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T266b,import type { ReactNode } from "react"; import { buttonVariants } from "@/components/ui/button"; import { cn } from "@/lib/utils"; // Cortexcn item "feature-bento-grid-01", revision 3604419d69ba, MIT license. // https://ui.cortexcn.dev/r/v/feature-bento-grid-01/3604419d69ba.json interface BentoImage { src: string; alt: string; } interface BentoAction { label: string; href: string; } interface BentoStat { value: string; /** Smaller text set beside the value, such as "%" or "+". */ suffix?: string; label: string; } export interface FeatureBentoGridProps { /** The tall photo tile that opens the grid. */ hero?: { image: BentoImage; label: string }; /** Caption on the tall tile that shows the logo. */ logoCaption?: string; stat?: BentoStat; /** The wide card with a large figure and one call to action. */ highlight?: { value: string; label: string; action: BentoAction }; /** The figure over a row of theme swatches. */ themes?: BentoStat; /** The wide photo tile with an icon, title, and two-line caption. */ closing?: { image: BentoImage; title: string; lines: [string, string] }; className?: string; } /** Sample photo from Unsplash (free to use under the Unsplash License). */ function unsplash(id: string, width: number) { return `https://images.unsplash.com/photo-${id}?w=${width}&q=80&auto=format&fit=crop`; } const DEFAULT_HERO = { image: { src: unsplash("1521194263619-39ecc5b55c61", 1000), alt: "Sunlight falling in sharp shapes across a concrete wall", }, label: "Designed with intent.", }; const DEFAULT_STAT: BentoStat = { value: "100", suffix: "%", label: "Open code, copied into your project", }; const DEFAULT_HIGHLIGHT = { value: "1 command", label: "Adds any block to your project with the shadcn CLI", action: { label: "Browse blocks", href: "#" }, }; const DEFAULT_THEMES: BentoStat = { value: "2", label: "Themes, light and dark, from one set of tokens", }; const DEFAULT_CLOSING = { image: { src: unsplash("1706451822135-e7276f49b06e", 1200), alt: "A concrete staircase cut by diagonal light", }, title: "Rapid development", lines: ["Build your interface faster", "with ready-to-use components"] as [ string, string, ], }; /** The Cortexcn mark in currentColor: two corner squares and a joined diagonal. */ function CortexcnMark({ className }: { className?: string }) { return ( ); } function ClockIcon({ className }: { className?: string }) { return ( ); } const cardClassName = "rounded-3xl bg-card text-card-foreground shadow-xs ring-1 ring-foreground/10"; /** A muted tile with the mark in the middle, in place of a product shot. */ function LogoTile({ className, markClassName, children, }: { className?: string; markClassName?: string; children?: ReactNode; }) { return (

{children}

); } function Photo({ image, width }: { image: BentoImage; width: number }) { return ( // biome-ignore lint/performance/noImgElement: framework-agnostic registry block {image.alt}

); } /** Theme tokens drawn as overlapping swatches. */ const SWATCHES = [ "bg-background", "bg-muted", "bg-secondary", "bg-primary", "bg-foreground", ]; export function FeatureBentoGrid({ hero = DEFAULT_HERO, logoCaption = "Build your interface with open code you can read, change, and keep.", stat = DEFAULT_STAT, highlight = DEFAULT_HIGHLIGHT, themes = DEFAULT_THEMES, closing = DEFAULT_CLOSING, className, }: FeatureBentoGridProps) { return (

{logoCaption}

{stat.value} {stat.suffix && ( {stat.suffix} )}

{stat.label}

{highlight.value}

{highlight.label}

{highlight.action.label}

{themes.value} {themes.suffix && ( {themes.suffix} )}

{themes.label}

); } 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L50",null,{"namespace":"@cortexcn","registryDependencies":["https://ui.cortexcn.dev/r/utils.json","button"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/blocks/feature-bento-grid-01/components/feature-bento-grid.tsx","content":"$52","type":"registry:component","target":"components/feature-bento-grid.tsx"}],"className":"h-[70svh] min-h-80"}]]}]