51: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"] 52: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"] 53:T1a65,'use client' import * as React from 'react' import { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator } from '@/components/ui/command' import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group' import { Checkbox } from '@/components/ui/checkbox' import { Label } from '@/components/ui/label' import { Button } from '@/components/ui/button' import { SlidersHorizontalIcon } from 'lucide-react' export interface CommandFilterOption { value: string label: string } export interface CommandFilterGroup { id: string heading: string defaultValue: string options: CommandFilterOption[] } export interface CommandCheckboxItem { id: string label: string count: number } export interface CommandCheckboxGroup { heading: string items: CommandCheckboxItem[] } export interface CommandFilterSearchProps { buttonLabel?: string placeholder?: string emptyMessage?: string filterGroups?: CommandFilterGroup[] checkboxGroups?: CommandCheckboxGroup[] } const defaultFilterGroups: CommandFilterGroup[] = [ { id: 'category', heading: 'Category', defaultValue: 'all', options: [ { value: 'all', label: 'All' }, { value: 'marketing-blocks', label: 'Marketing Blocks' }, { value: 'ui-components', label: 'UI Components' } ] }, { id: 'sort', heading: 'Sort', defaultValue: 'recommended', options: [ { value: 'recommended', label: 'Recommended' }, { value: 'most-downloaded', label: 'Most downloaded' }, { value: 'most-bookmarked', label: 'Most bookmarked' }, { value: 'newest', label: 'Newest' } ] }, { id: 'time', heading: 'Time', defaultValue: 'all-time', options: [ { value: 'all-time', label: 'All time' }, { value: 'last-week', label: 'Last week' }, { value: 'last-month', label: 'Last month' }, { value: 'last-3-months', label: 'Last 3 months' }, { value: 'last-year', label: 'Last year' } ] } ] const defaultCheckboxGroups: CommandCheckboxGroup[] = [ { heading: 'Marketing Blocks', items: [ { id: 'announcements', label: 'Announcements', count: 10 }, { id: 'backgrounds', label: 'Backgrounds', count: 33 }, { id: 'borders', label: 'Borders', count: 12 }, { id: 'calls-to-action', label: 'Calls to Action', count: 34 }, { id: 'clients', label: 'Clients', count: 16 }, { id: 'comparisons', label: 'Comparisons', count: 6 }, { id: 'docks', label: 'Docks', count: 7 }, { id: 'features', label: 'Features', count: 36 }, { id: 'footers', label: 'Footers', count: 14 }, { id: 'heroes', label: 'Heroes', count: 73 } ] }, { heading: 'UI Components', items: [ { id: 'accordions', label: 'Accordions', count: 40 }, { id: 'ai-chats', label: 'AI Chats', count: 30 }, { id: 'alerts', label: 'Alerts', count: 23 }, { id: 'avatars', label: 'Avatars', count: 17 }, { id: 'badges', label: 'Badges', count: 25 } ] } ] const CommandFilterSearchDemo = ({ buttonLabel = 'Search & Filter', placeholder = 'Search...', emptyMessage = 'No results found.', filterGroups = defaultFilterGroups, checkboxGroups = defaultCheckboxGroups }: CommandFilterSearchProps) => { const [open, setOpen] = React.useState(false) const [filters, setFilters] = React.useState>(() => Object.fromEntries(filterGroups.map(g => [g.id, g.defaultValue])) ) const [checked, setChecked] = React.useState>({}) const toggle = (id: string) => setChecked(prev => ({ ...prev, [id]: !prev[id] })) return (

{emptyMessage} {filterGroups.map((group, index) => ( {index > 0 && } setFilters(prev => ({ ...prev, [group.id]: val }))} className='gap-0 px-2' > {group.options.map(({ value, label }) => (

{label}

))} ))} {checkboxGroups.map((group) => ( {group.items.map(({ id, label, count }) => ( toggle(id)} className='flex cursor-pointer items-center justify-between' >

toggle(id)} onPointerDown={e => e.stopPropagation()} /> {label}

{count} ))} ))}

) } export default CommandFilterSearchDemo 50:["$","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":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L51",null,{"namespace":"@shadcn-space","registryDependencies":["button","command","label","checkbox","radio-group"]}]]}],null]}],["$","$L52",null,{"files":[{"path":"src/components/shadcn-space/command/command-07.tsx","content":"$53","type":"registry:component","target":"components/shadcn-space/command/command-07.tsx"}],"className":"h-[70svh] min-h-80"}]]}]