Dropdown, select and command menu

// One menu per type: Basic, Country, Avatar, Provider, Brand, Company
<DropdownMenu>
  <DropdownMenuTrigger asChild>
    <Button size="sm" appearance="stroke" trailingIcon={<RiArrowDownSLine />}>Basic: {value}</Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuRadioGroup value={value} onValueChange={setValue}>
      <DropdownMenuRadioItem value="English" size="sm" leading={<RiGlobalLine />}>English</DropdownMenuRadioItem>
      <DropdownMenuRadioItem value="French" size="sm" leading={<RiGlobalLine />}>French</DropdownMenuRadioItem>
      <DropdownMenuRadioItem value="Spanish" size="sm" leading={<RiGlobalLine />}>Spanish</DropdownMenuRadioItem>
    </DropdownMenuRadioGroup>
    <DropdownMenuItem size="sm" leading={<RiGlobalLine />} disabled>Unavailable</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

// Avatar type at Large: a 40px avatar and a description line
<DropdownMenuRadioItem
  value="Sophia Williams"
  size="lg"
  leading={<Avatar name="Sophia Williams" color="blue" size={40} />}
  description="Avatar option"
>
  Sophia Williams
</DropdownMenuRadioItem>

<DropdownMenuCheckboxItem checked={all} onCheckedChange={toggleAll} onSelect={(e) => e.preventDefault()}>
  All topics
</DropdownMenuCheckboxItem>
<DropdownMenuSwitchItem leading={<RiBellLine />} shortcut="⌥N" checked={notify} onCheckedChange={setNotify}>
  Notifications
</DropdownMenuSwitchItem>
<DropdownMenuItem leading={<RiUser3Line />} sublabel="(@sophia)">Sublabel</DropdownMenuItem>
<DropdownMenuItem leading={<RiShareLine />} badge={<span className="status">New</span>}>Badge</DropdownMenuItem>
<DropdownMenuItem leading={<RiBookOpenLine />} size="lg" description="Shown under the label at Large size">Description</DropdownMenuItem>
<DropdownMenuSub>
  <DropdownMenuSubTrigger leading={<RiFolderLine />}>Right icon (submenu)</DropdownMenuSubTrigger>
  <DropdownMenuSubContent>…</DropdownMenuSubContent>
</DropdownMenuSub>
<DropdownMenuCheckboxItem leading={<RiGlobalLine />} checked disabled>Disabled with checkbox</DropdownMenuCheckboxItem>

<Field label="Student (large trigger)">
  <Combobox options={students} placeholder="Select a student" searchPlaceholder="Search…" />
</Field>
<Field label="Student (small trigger)">
  <Combobox size="sm" options={students} placeholder="Select a student" searchPlaceholder="Search…" />
</Field>

<Kbd>⌘J</Kbd>               // item and search-row shortcuts
<Kbd variant="muted">esc</Kbd> // Command menu footer hints

<DropdownMenu>
  <DropdownMenuTrigger asChild>
    <Button size="sm" appearance="ghost" iconOnly aria-label={`Options for ${lesson.title}`} leadingIcon={<RiMore2Line />} />
  </DropdownMenuTrigger>
  <DropdownMenuContent align="end">
    <DropdownMenuLabel>{lesson.title}</DropdownMenuLabel>
    <DropdownMenuItem leading={<RiEditLine />} onSelect={startRename}>Rename</DropdownMenuItem>
    <DropdownMenuItem leading={<RiFileCopyLine />} sublabel="(copy)" onSelect={duplicate}>Duplicate</DropdownMenuItem>
    <DropdownMenuItem leading={<RiShareLine />} badge={<span className="status">New</span>} onSelect={share}>Copy share link</DropdownMenuItem>
    <DropdownMenuSub>
      <DropdownMenuSubTrigger leading={<RiFolderLine />}>Move to space</DropdownMenuSubTrigger>
      <DropdownMenuSubContent>
        <DropdownMenuRadioGroup value={lesson.space} onValueChange={move}>
          {spaces.map((s) => <DropdownMenuRadioItem key={s} value={s}>{s}</DropdownMenuRadioItem>)}
        </DropdownMenuRadioGroup>
      </DropdownMenuSubContent>
    </DropdownMenuSub>
    <DropdownMenuCheckboxItem checked={lesson.completed} onCheckedChange={setCompleted}>Completed</DropdownMenuCheckboxItem>
    <DropdownMenuSeparator />
    <DropdownMenuItem leading={<RiArchiveLine />} disabled>Archive (owner only)</DropdownMenuItem>
    <DropdownMenuItem leading={<RiDeleteBinLine />} onSelect={remove}>Delete</DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

<Field label="Select a user" hint={value ? `${name(value)} will be invited.` : 'Invite someone to this space.'}>
  <Combobox options={people} value={value} onValueChange={setValue} placeholder="Select the user to invite…" searchPlaceholder="Search…" />
</Field>
<Field label="Reviewer" required error={touched && !reviewer ? 'Choose a reviewer.' : undefined}>
  <Combobox
    options={people}
    value={reviewer}
    onValueChange={(v) => { setReviewer(v); setTouched(true) }}
    onOpenChange={(open) => { if (!open) setTouched(true) }}
    placeholder="Select…"
  />
</Field>

useEffect(() => {
  const onKey = (e: KeyboardEvent) => {
    if (e.key.toLowerCase() === 'j' && (e.metaKey || e.ctrlKey)) { e.preventDefault(); setOpen((o) => !o) }
  }
  window.addEventListener('keydown', onKey)
  return () => window.removeEventListener('keydown', onKey)
}, [])

<Button appearance="stroke" leadingIcon={<RiSearch2Line />} trailingIcon={<Kbd>⌘J</Kbd>} onClick={() => setOpen(true)}>Search lessons</Button>
<CommandMenu
  open={open}
  onOpenChange={setOpen}
  label="Search Nuton"
  placeholder="Search lessons, spaces and commands…"
  shortcut="⌘J"
  footer={
    <CommandMenuFooter hints={[{ keys: ['↑', '↓'], label: 'Navigate' }, { keys: ['↵'], label: 'Select' }, { keys: ['esc'], label: 'Close' }]}>
      Not what you're looking for? <LinkButton size="sm" tone="primary" href="/help">Help Center</LinkButton>
    </CommandMenuFooter>
  }
>
  <CommandMenuEmpty>No results</CommandMenuEmpty>
  <CommandMenuGroup heading="Actions">
    <CommandMenuItem leading={<RiAddLine />} onSelect={createLesson}>Create lesson</CommandMenuItem>
  </CommandMenuGroup>
  <CommandMenuGroup heading="Lessons">
    <CommandMenuItem leading={<RiBookOpenLine />} keywords={['biology', 'plants']} onSelect={() => open('photosynthesis')}>Photosynthesis</CommandMenuItem>
  </CommandMenuGroup>
  <CommandMenuGroup heading="Spaces and people">
    <CommandMenuItem size="md" leading={<RiFolderLine />} description="12 lessons · 34 students" onSelect={() => open('biology-101')}>Biology 101</CommandMenuItem>
    <CommandMenuItem size="md" leading={<Avatar name="Sophia Williams" color="yellow" size={40} />} sublabel="@sophia" description="Teacher">Sophia Williams</CommandMenuItem>
  </CommandMenuGroup>
</CommandMenu>