Command Menu

import * as React from 'react'
import { Button, CommandMenu, type CommandMenuGroup } from 'ferry-ui'
import { CreditCard, FolderKanban, LayoutDashboard, Plus, Search, UserPlus, Users } from 'lucide-react'

export default function CommandMenuHero() {
  const [open, setOpen] = React.useState(false)
  const [last, setLast] = React.useState('none')

  // Navigation first, actions last. In a real app, a navigation item has an `href`.
  const groups: CommandMenuGroup[] = [
    {
      id: 'pages',
      label: 'Go to',
      items: [
        { id: 'overview', label: 'Overview', icon: <LayoutDashboard />, onSelect: () => setLast('Go to Overview') },
        { id: 'projects', label: 'Projects', icon: <FolderKanban />, onSelect: () => setLast('Go to Projects') },
        { id: 'members', label: 'Members', icon: <Users />, onSelect: () => setLast('Go to Members') },
        { id: 'billing', label: 'Billing', icon: <CreditCard />, onSelect: () => setLast('Go to Billing') },
      ],
    },
    {
      id: 'actions',
      label: 'Actions',
      items: [
        { id: 'new-project', label: 'New project', icon: <Plus />, onSelect: () => setLast('New project') },
        { id: 'invite', label: 'Invite member', icon: <UserPlus />, onSelect: () => setLast('Invite member') },
      ],
    },
  ]

  return (
    <div className="flex flex-col items-center gap-3">
      <Button icon={<Search />} onClick={() => setOpen(true)}>
        Open the command menu
      </Button>
      <p className="text-[13px] text-foreground-light">Last command: {last}</p>
      <CommandMenu open={open} onOpenChange={setOpen} groups={groups} />
    </div>
  )
}

import * as React from 'react'
import { Badge, Button, CommandMenu, useModKey, type CommandMenuGroup } from 'ferry-ui'
import { CreditCard, FolderKanban, KeyRound, Plus, Rows3 } from 'lucide-react'

export default function CommandMenuItemOptions() {
  const [open, setOpen] = React.useState(false)
  const [compact, setCompact] = React.useState(false)
  const mod = useModKey()

  const groups: CommandMenuGroup[] = [
    {
      id: 'pages',
      label: 'Go to',
      items: [
        // `keywords`: the query "payment" finds this item.
        { id: 'billing', label: 'Billing', icon: <CreditCard />, hint: 'Plan and invoices', keywords: ['payment'] },
        { id: 'projects', label: 'Projects', icon: <FolderKanban />, badge: <Badge variant="info">New</Badge> },
      ],
    },
    {
      id: 'actions',
      label: 'Actions',
      items: [
        // `shortcut` shows the keys. Your code binds them.
        { id: 'new-project', label: 'New project', icon: <Plus />, shortcut: `${mod} N` },
        {
          id: 'compact',
          label: 'Compact rows',
          icon: <Rows3 />,
          hint: compact ? 'On' : 'Off',
          keepOpen: true,
          onSelect: () => setCompact((value) => !value),
        },
        { id: 'api-key', label: 'New API key', icon: <KeyRound />, hint: 'Admins only', disabled: true },
      ],
    },
  ]

  return (
    <>
      <Button onClick={() => setOpen(true)}>Open the command menu</Button>
      <CommandMenu open={open} onOpenChange={setOpen} groups={groups} />
    </>
  )
}

import * as React from 'react'
import { Button, CommandMenu, type CommandMenuGroup } from 'ferry-ui'
import { FileText } from 'lucide-react'

const INVOICES = [
  { id: 'INV-2041', customer: 'Northwind Trading', amount: '$4,200.00' },
  { id: 'INV-2042', customer: 'Acme', amount: '$860.00' },
  { id: 'INV-2043', customer: 'Globex Logistics', amount: '$12,940.50' },
  { id: 'INV-2044', customer: 'Umbrella Health', amount: '$7,020.00' },
]

export default function CommandMenuRemote() {
  const [open, setOpen] = React.useState(false)
  const [results, setResults] = React.useState(INVOICES)
  const [loading, setLoading] = React.useState(false)
  const timer = React.useRef<number | undefined>(undefined)

  // A timer plays the role of the server. The menu calls this function with "" each time it opens.
  const search = (query: string) => {
    window.clearTimeout(timer.current)
    setLoading(true)
    timer.current = window.setTimeout(() => {
      const text = query.trim().toLowerCase()
      setResults(INVOICES.filter((invoice) => `${invoice.id} ${invoice.customer}`.toLowerCase().includes(text)))
      setLoading(false)
    }, 500)
  }

  const groups: CommandMenuGroup[] = [
    {
      id: 'invoices',
      label: 'Invoices',
      items: results.map((invoice) => ({
        id: invoice.id,
        label: `${invoice.id} · ${invoice.customer}`,
        icon: <FileText />,
        hint: invoice.amount,
      })),
    },
  ]

  return (
    <>
      <Button onClick={() => setOpen(true)}>Search invoices</Button>
      <CommandMenu
        open={open}
        onOpenChange={setOpen}
        groups={groups}
        shouldFilter={false}
        onSearchChange={search}
        loading={loading}
        loadingMessage="Search in progress…"
        emptyMessage="No invoice matches."
        placeholder="Search invoices by number or customer…"
      />
    </>
  )
}

import * as React from 'react'
import {
  Avatar,
  AvatarFallback,
  Button,
  CommandGroup,
  CommandItem,
  CommandMenu,
  CommandSeparator,
  toast,
  type CommandMenuGroup,
} from 'ferry-ui'
import { FolderKanban } from 'lucide-react'

// In a real app, this item has an `href` or an `onSelect`.
const GROUPS: CommandMenuGroup[] = [
  { id: 'pages', label: 'Go to', items: [{ id: 'projects', label: 'Projects', icon: <FolderKanban /> }] },
]

const MEMBERS = [
  { name: 'Maya Chen', initials: 'MC', email: 'maya@example.com' },
  { name: 'Sam Lee', initials: 'SL', email: 'sam@example.com' },
]

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

  return (
    <>
      <Button onClick={() => setOpen(true)}>Open the command menu</Button>
      <CommandMenu open={open} onOpenChange={setOpen} groups={GROUPS}>
        <CommandSeparator />
        <CommandGroup heading="Members">
          {MEMBERS.map((member) => (
            <CommandItem
              key={member.email}
              value={`${member.name} ${member.email}`}
              onSelect={() => {
                // A custom row does not close the menu. Close it in your code.
                setOpen(false)
                toast(`${member.name} selected`)
              }}
            >
              <Avatar size="sm">
                <AvatarFallback>{member.initials}</AvatarFallback>
              </Avatar>
              <span className="flex min-w-0 flex-col">
                <span className="truncate text-foreground">{member.name}</span>
                <span className="truncate text-[12px] text-foreground-lighter">{member.email}</span>
              </span>
            </CommandItem>
          ))}
        </CommandGroup>
      </CommandMenu>
    </>
  )
}