Command

import * as React from 'react'
import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
} from '@/components/ui/command'

const CASE_TYPES = [
  { value: 'building-permit', label: 'Building permit', count: 128 },
  { value: 'demolition', label: 'Demolition notice', count: 14 },
  { value: 'sign-permit', label: 'Sign permit', count: 23 },
  { value: 'environmental', label: 'Environmental permit', count: 41 },
  { value: 'food-registration', label: 'Food business registration', count: 9 },
  { value: 'records-request', label: 'Public records request', count: 57 },
]

export function CommandSelector() {
  const [selected, setSelected] = React.useState<string[]>(['building-permit', 'sign-permit'])

  function toggle(value: string) {
    setSelected((current) => (current.includes(value) ? current.filter((item) => item !== value) : [...current, value]))
  }

  return (
    <Command className="w-full max-w-xs rounded-xl border shadow-md">
      <CommandInput placeholder="Filter case types…" aria-label="Filter case types" />
      <CommandList>
        <CommandEmpty>No case type found.</CommandEmpty>
        <CommandGroup heading={`Case types · ${selected.length} selected`}>
          {CASE_TYPES.map((type) => (
            <CommandItem
              key={type.value}
              value={type.label}
              data-checked={selected.includes(type.value)}
              aria-selected={selected.includes(type.value)}
              onSelect={() => toggle(type.value)}
            >
              <span className="flex-1">{type.label}</span>
              <span className="text-xs text-muted-foreground tabular-nums">{type.count}</span>
            </CommandItem>
          ))}
        </CommandGroup>
      </CommandList>
    </Command>
  )
}

import {
  CalendarDaysIcon,
  FileTextIcon,
  FolderOpenIcon,
  InboxIcon,
  SearchIcon,
  UsersIcon,
} from 'lucide-react'
import * as React from 'react'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import { Kbd, KbdGroup } from '@/components/ui/kbd'
import {
  Command,
  CommandDialog,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
  CommandSeparator,
  CommandShortcut,
} from '@/components/ui/command'

const PEOPLE = [
  { name: 'Ingrid Hansen', role: 'Building inspector', unit: 'Planning and Building' },
  { name: 'Mikko Virtanen', role: 'Needs assessor', unit: 'Elderly Care' },
  { name: 'Omar Haddad', role: 'Registrar', unit: 'Registry and Archive' },
  { name: 'Sofia Berg', role: 'Procurement officer', unit: 'Procurement' },
]

export function CommandDialogExample() {
  const [open, setOpen] = React.useState(false)

  React.useEffect(() => {
    function onKeyDown(event: KeyboardEvent) {
      if (event.key === 'j' && (event.metaKey || event.ctrlKey)) {
        event.preventDefault()
        setOpen((current) => !current)
      }
    }
    document.addEventListener('keydown', onKeyDown)
    return () => document.removeEventListener('keydown', onKeyDown)
  }, [])

  return (
    <>
      <Button variant="outline" className="w-64 justify-start text-muted-foreground" onClick={() => setOpen(true)}>
        <SearchIcon data-icon="inline-start" />
        Search the case system
        <KbdGroup className="ml-auto">
          <Kbd>⌘</Kbd>
          <Kbd>J</Kbd>
        </KbdGroup>
      </Button>
      <CommandDialog
        open={open}
        onOpenChange={setOpen}
        title="Search the case system"
        description="Find a case, a colleague or a page"
      >
        <Command>
          <CommandInput placeholder="Type a case number, name or page…" aria-label="Search the case system" />
          <CommandList>
            <CommandEmpty>No results found.</CommandEmpty>
            <CommandGroup heading="Go to">
              <CommandItem>
                <InboxIcon />
                <span>My cases</span>
                <CommandShortcut>G C</CommandShortcut>
              </CommandItem>
              <CommandItem>
                <CalendarDaysIcon />
                <span>Council meetings</span>
                <CommandShortcut>G M</CommandShortcut>
              </CommandItem>
              <CommandItem>
                <FolderOpenIcon />
                <span>Registry and archive</span>
                <CommandShortcut>G R</CommandShortcut>
              </CommandItem>
            </CommandGroup>
            <CommandSeparator />
            <CommandGroup heading="People">
              {PEOPLE.map((person) => (
                <CommandItem key={person.name} value={`${person.name} ${person.role} ${person.unit}`}>
                  <UsersIcon />
                  <span>{person.name}</span>
                  <span className="truncate text-muted-foreground">{person.role}</span>
                </CommandItem>
              ))}
            </CommandGroup>
            <CommandSeparator />
            <CommandGroup heading="Cases">
              <CommandItem value="2026-04812 carport storgatan">
                <FileTextIcon />
                <span>2026-04812 · Carport, Storgatan 14</span>
                <Badge variant="secondary" className="ml-auto">
                  In review
                </Badge>
              </CommandItem>
            </CommandGroup>
          </CommandList>
        </Command>
      </CommandDialog>
    </>
  )
}

import { BellIcon, FilePlusIcon, InboxIcon, LandmarkIcon, PlaneIcon, UserIcon } from 'lucide-react'
import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
  CommandSeparator,
  CommandShortcut,
} from '@/components/ui/command'

export function CommandDisabled() {
  return (
    <Command className="w-full max-w-md rounded-xl border shadow-md">
      <CommandInput placeholder="Search cases, people or actions…" aria-label="Search cases, people or actions" />
      <CommandList>
        <CommandEmpty>No results found.</CommandEmpty>
        <CommandGroup heading="Suggestions">
          <CommandItem>
            <FilePlusIcon />
            <span>Register a new case</span>
            <CommandShortcut>⌘N</CommandShortcut>
          </CommandItem>
          <CommandItem disabled>
            <InboxIcon />
            <span>Open my inbox</span>
            <CommandShortcut>⌘I</CommandShortcut>
          </CommandItem>
          <CommandItem>
            <LandmarkIcon />
            <span>Council meeting agenda, 19 May</span>
          </CommandItem>
        </CommandGroup>
        <CommandSeparator />
        <CommandGroup heading="Settings">
          <CommandItem>
            <UserIcon />
            <span>Profile</span>
            <CommandShortcut>⌘P</CommandShortcut>
          </CommandItem>
          <CommandItem disabled>
            <BellIcon />
            <span>Notifications</span>
          </CommandItem>
          <CommandItem>
            <PlaneIcon />
            <span>Set out of office</span>
          </CommandItem>
        </CommandGroup>
      </CommandList>
    </Command>
  )
}