Inline and as a palette

// apps/docs/examples/ui/command.tsx'use client';
import {useState} from 'react';import {FileTextIcon, SettingsIcon, UsersIcon} from 'lucide-react';
import {Button} from '@workspace/active-ui/components/primitives/button';import {  Command,  CommandDialog,  CommandEmpty,  CommandGroup,  CommandInput,  CommandItem,  CommandList,  CommandSeparator,} from '@workspace/active-ui/components/primitives/command';
const PAGES = [  {label: 'Schemes', icon: FileTextIcon},  {label: 'Participants', icon: UsersIcon},  {label: 'Settings', icon: SettingsIcon},];const ACTIONS = ['Create a scheme', 'Import participants', 'Send statements'];
function Palette({onChoose}: {onChoose: (value: string) => void}) {  return (    <>      <CommandInput placeholder="Type a page or an action" />      <CommandList>        <CommandEmpty>Nothing matches.</CommandEmpty>        <CommandGroup heading="Go to">          {PAGES.map(({label, icon: Icon}) => (            <CommandItem key={label} onSelect={() => onChoose(label)}>              <Icon aria-hidden />              {label}            </CommandItem>          ))}        </CommandGroup>        <CommandSeparator />        <CommandGroup heading="Actions">          {ACTIONS.map((label) => (            <CommandItem key={label} onSelect={() => onChoose(label)}>              {label}            </CommandItem>          ))}        </CommandGroup>      </CommandList>    </>  );}
/** * A searchable list of commands: inline, as a filterable menu on the page, * and in a dialog, as a command palette. Typing filters by fuzzy match; the * arrow keys and Enter choose. */export default function CommandExample() {  const [open, setOpen] = useState(false);  const [chosen, setChosen] = useState('nothing yet');  return (    <div className="flex w-full max-w-sm flex-col items-center gap-4">      <Command        label="Pages and actions"        className="w-full rounded-lg border shadow-xs"      >        <Palette onChoose={setChosen} />      </Command>      <Button variant="outline" onClick={() => setOpen(true)}>        Open the command palette      </Button>      <CommandDialog        open={open}        onOpenChange={setOpen}        title="Command palette"        description="Search for a page or an action."      >        <Command label="Pages and actions">          <Palette            onChoose={(value) => {              setChosen(value);              setOpen(false);            }}          />        </Command>      </CommandDialog>      <p className="text-muted-foreground text-sm" aria-live="polite">        Chosen: {chosen}      </p>    </div>  );}