Command

import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
  CommandSeparator,
  CommandShortcut,
  toast,
  useModKey,
} from 'ferry-ui'
import { FolderKanban, Plus, Settings, UserPlus } from 'lucide-react'

export default function CommandHero() {
  const mod = useModKey()
  return (
    <Command label="Commands" className="max-w-md border border-border-strong">
      <CommandInput placeholder="Type a command or search…" />
      <CommandList>
        <CommandEmpty>No results found.</CommandEmpty>
        <CommandGroup heading="Projects">
          <CommandItem onSelect={() => toast('Open the project Billing portal')}>
            <FolderKanban /> Billing portal
          </CommandItem>
          <CommandItem onSelect={() => toast('Open the project Customer dashboard')}>
            <FolderKanban /> Customer dashboard
          </CommandItem>
        </CommandGroup>
        <CommandSeparator />
        <CommandGroup heading="Actions">
          <CommandItem onSelect={() => toast('New project')}>
            <Plus /> New project
            <CommandShortcut>{mod} N</CommandShortcut>
          </CommandItem>
          <CommandItem onSelect={() => toast('Invite a member')}>
            <UserPlus /> Invite a member
            <CommandShortcut>{mod} I</CommandShortcut>
          </CommandItem>
          <CommandItem onSelect={() => toast('Open the settings')}>
            <Settings /> Open settings
          </CommandItem>
        </CommandGroup>
      </CommandList>
    </Command>
  )
}

import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, toast } from 'ferry-ui'
import { CreditCard, KeyRound, LayoutDashboard, Users } from 'lucide-react'

export default function CommandItems() {
  return (
    <Command label="Pages" className="max-w-sm border border-border-strong">
      <CommandInput placeholder="Go to a page…" />
      <CommandList>
        <CommandEmpty>No page found.</CommandEmpty>
        <CommandGroup heading="Go to">
          <CommandItem onSelect={() => toast('Open the dashboard')}>
            <LayoutDashboard /> Dashboard
          </CommandItem>
          {/* `keywords`: the search for "invoices" also finds this item. */}
          <CommandItem keywords={['invoices', 'payment', 'plan']} onSelect={() => toast('Open the billing page')}>
            <CreditCard /> Billing
          </CommandItem>
          {/* `value`: the search reads this text, not the content with the count. */}
          <CommandItem value="Members" onSelect={() => toast('Open the members page')}>
            <Users /> Members
            <span className="ml-auto text-xs text-foreground-lighter">12</span>
          </CommandItem>
          <CommandItem disabled>
            <KeyRound /> API keys
          </CommandItem>
        </CommandGroup>
      </CommandList>
    </Command>
  )
}

import * as React from 'react'
import {
  Button,
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
  Popover,
  PopoverContent,
  PopoverTrigger,
} from 'ferry-ui'
import { Check, ChevronsUpDown } from 'lucide-react'

const MEMBERS = [
  { id: 'maya', name: 'Maya Chen' },
  { id: 'sam', name: 'Sam Lee' },
  { id: 'ada', name: 'Ada Park' },
  { id: 'liam', name: 'Liam Chen' },
  { id: 'sofia', name: 'Sofia Rossi' },
]

export default function CommandCombobox() {
  const [open, setOpen] = React.useState(false)
  const [owner, setOwner] = React.useState<string>()
  const current = MEMBERS.find((member) => member.id === owner)

  return (
    <Popover open={open} onOpenChange={setOpen}>
      <PopoverTrigger asChild>
        <Button role="combobox" aria-expanded={open} iconRight={<ChevronsUpDown />} className="w-56 justify-between">
          {current?.name ?? 'Select an owner'}
        </Button>
      </PopoverTrigger>
      <PopoverContent align="start" className="w-56 p-0" aria-label="Owner">
        <Command>
          <CommandInput placeholder="Find a member…" />
          <CommandList>
            <CommandEmpty>No member found.</CommandEmpty>
            <CommandGroup heading="Members">
              {MEMBERS.map((member) => (
                <CommandItem
                  key={member.id}
                  value={member.name}
                  onSelect={() => {
                    setOwner(member.id)
                    setOpen(false)
                  }}
                >
                  {member.name}
                  {member.id === owner && <Check className="ml-auto" />}
                </CommandItem>
              ))}
            </CommandGroup>
          </CommandList>
        </Command>
      </PopoverContent>
    </Popover>
  )
}

import * as React from 'react'
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, toast } from 'ferry-ui'
import { FileText } from 'lucide-react'

const INVOICES = [
  { id: 'INV-2041', customer: 'Acme', amount: '$4,200.00' },
  { id: 'INV-2042', customer: 'Maya Chen', amount: '$860.00' },
  { id: 'INV-2043', customer: 'Sam Lee', amount: '$12,940.50' },
  { id: 'INV-2044', customer: 'Ada Park', amount: '$1,315.00' },
]

export default function CommandOwnFilter() {
  const [query, setQuery] = React.useState('')
  const text = query.trim().toLowerCase()
  // Your code filters the list. With a search on the server, the results come from the request.
  const results = INVOICES.filter((invoice) => `${invoice.id} ${invoice.customer}`.toLowerCase().includes(text))

  return (
    <Command shouldFilter={false} label="Invoices" className="max-w-md border border-border-strong">
      <CommandInput value={query} onValueChange={setQuery} placeholder="Search by number or customer…" />
      <CommandList>
        <CommandEmpty>No invoice matches “{query}”.</CommandEmpty>
        {results.length > 0 && (
          <CommandGroup heading={`Invoices · ${results.length}`}>
            {results.map((invoice) => (
              <CommandItem key={invoice.id} value={invoice.id} onSelect={() => toast(`Open the invoice ${invoice.id}`)}>
                <FileText />
                <span className="font-mono text-xs text-foreground-lighter">{invoice.id}</span>
                <span className="truncate">{invoice.customer}</span>
                <span className="tabular ml-auto text-xs text-foreground-lighter">{invoice.amount}</span>
              </CommandItem>
            ))}
          </CommandGroup>
        )}
      </CommandList>
    </Command>
  )
}

import * as React from 'react'
import { Button, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, toast } from 'ferry-ui'
import { Users } from 'lucide-react'

const MEMBERS = [
  { name: 'Maya Chen', email: 'maya@example.com' },
  { name: 'Sam Lee', email: 'sam@example.com' },
  { name: 'Ada Park', email: 'ada@example.com' },
  { name: 'Liam Chen', email: 'liam@example.com' },
]

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

  return (
    <>
      <Button icon={<Users />} onClick={() => setOpen(true)}>
        Find a member
      </Button>
      <CommandDialog
        open={open}
        onOpenChange={setOpen}
        title="Find a member"
        description="Search the members of the workspace by name or by email."
      >
        <CommandInput placeholder="Search by name or email…" />
        <CommandList>
          <CommandEmpty>No member found.</CommandEmpty>
          <CommandGroup heading="Members">
            {MEMBERS.map((member) => (
              <CommandItem
                key={member.email}
                value={`${member.name} ${member.email}`}
                onSelect={() => {
                  toast(`Open the profile of ${member.name}`)
                  setOpen(false)
                }}
              >
                {member.name}
                <span className="ml-auto truncate text-xs text-foreground-lighter">{member.email}</span>
              </CommandItem>
            ))}
          </CommandGroup>
        </CommandList>
      </CommandDialog>
    </>
  )
}