Command

1"use client"23import { createSignal, createEffect, onCleanup } from '@barefootjs/dom'4import {5  CommandDialog,6  CommandInput,7  CommandList,8  CommandEmpty,9  CommandGroup,10  CommandItem,11  CommandSeparator,12  CommandShortcut,13} from '@/components/ui/command'1415function CommandDialogDemo() {16  const [open, setOpen] = createSignal(false)1718  createEffect(() => {19    const handleKeyDown = (e: KeyboardEvent) => {20      if (e.key === 'j' && (e.metaKey || e.ctrlKey)) {21        e.preventDefault()22        setOpen(prev => !prev)23      }24    }25    document.addEventListener('keydown', handleKeyDown)26    onCleanup(() => document.removeEventListener('keydown', handleKeyDown))27  })2829  return (30    <>31      <p className="text-sm text-muted-foreground">32        Press <kbd>⌘J</kbd> or click the button.33      </p>34      <button onClick={() => setOpen(true)}>35        Open Command Palette36      </button>37      <CommandDialog open={open()} onOpenChange={setOpen}>38        <CommandInput placeholder="Type a command or search..." />39        <CommandList>40          <CommandEmpty>No results found.</CommandEmpty>41          <CommandGroup heading="Suggestions">42            <CommandItem>Calendar</CommandItem>43            <CommandItem>Search Emoji</CommandItem>44          </CommandGroup>45          <CommandSeparator />46          <CommandGroup heading="Settings">47            <CommandItem>Profile<CommandShortcut>⌘P</CommandShortcut></CommandItem>48            <CommandItem>Settings<CommandShortcut>⌘S</CommandShortcut></CommandItem>49          </CommandGroup>50        </CommandList>51      </CommandDialog>52    </>53  )54}

1import {2  Command,3  CommandInput,4  CommandList,5  CommandEmpty,6  CommandGroup,7  CommandItem,8} from '@/components/ui/command'910function CommandFilterDemo() {11  // Prefix match: only show items starting with the search string12  const prefixFilter = (value: string, search: string) => {13    if (!search) return true14    return value.toLowerCase().startsWith(search.toLowerCase())15  }1617  return (18    <Command filter={prefixFilter} class="rounded-lg border shadow-md">19      <CommandInput placeholder="Try prefix matching..." />20      <CommandList>21        <CommandEmpty>No results found.</CommandEmpty>22        <CommandGroup heading="Fruits">23          <CommandItem value="Apple">Apple</CommandItem>24          <CommandItem value="Apricot">Apricot</CommandItem>25          <CommandItem value="Banana">Banana</CommandItem>26          <CommandItem value="Blueberry">Blueberry</CommandItem>27          <CommandItem value="Cherry">Cherry</CommandItem>28          <CommandItem value="Cranberry">Cranberry</CommandItem>29        </CommandGroup>30      </CommandList>31    </Command>32  )33}