export type BentoCommandItem = { label: string; value: string; detail?: string; }; type BentoCommandGridProps = { eyebrow?: string; title?: string; description?: string; command?: string; items?: BentoCommandItem[]; className?: string; }; const defaultItems: BentoCommandItem[] = [ { label: "Median setup time", value: "38 s", detail: "From install to first render across 1,240 projects in May" }, { label: "Bundle added", value: "4.1 kB", detail: "Gzipped, no runtime dependencies beyond React" }, { label: "Covered states", value: "6", detail: "Default, hover, focus, disabled, loading, and error" }, ]; export function BentoCommandGrid({ eyebrow = "Getting started", title = "Add the billing summary block to an existing dashboard.", description = "The block copies into your codebase, so you can rename props and restyle it without forking a package.", command = "npx shadcn@latest add @netter/bento-command-grid", items = defaultItems, className = "", }: BentoCommandGridProps) { return (

{eyebrow ?

{eyebrow}

: null}

{title}

{description ?

{description}

: null} {command ? (


            {command}

) : null}

{items.map((item) => (

{item.label}

{item.value}

{item.detail ?

{item.detail}

: null}

))}

); }