{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "command-09",
  "title": "Assignee picker",
  "description": "Avatars with name and email subtext in the trigger and options.",
  "dependencies": [],
  "registryDependencies": [
    "popover",
    "command",
    "button",
    "avatar"
  ],
  "files": [
    {
      "path": "registry/patterns/command/command-09.tsx",
      "content": "'use client'\n\nimport { Avatar, AvatarFallback } from '@/components/ui/avatar'\nimport { Button } from '@/components/ui/button'\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from '@/components/ui/command'\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from '@/components/ui/popover'\nimport { ChevronsUpDownIcon } from 'lucide-react'\nimport { useState } from 'react'\n\nconst members = [\n  { value: 'olivia', name: 'Olivia Martin', email: 'olivia@acme.com' },\n  { value: 'jackson', name: 'Jackson Lee', email: 'jackson@acme.com' },\n  { value: 'isabella', name: 'Isabella Nguyen', email: 'isabella@acme.com' },\n  { value: 'william', name: 'William Kim', email: 'will@acme.com' },\n]\n\nfunction initials(name: string) {\n  return name\n    .split(' ')\n    .map((part) => part[0])\n    .join('')\n}\n\nexport function Command09() {\n  const [open, setOpen] = useState(false)\n  const [value, setValue] = useState('olivia')\n  const selected = members.find((member) => member.value === value)\n\n  return (\n    <Popover open={open} onOpenChange={setOpen}>\n      <PopoverTrigger\n        render={\n          <Button\n            variant=\"outline\"\n            role=\"combobox\"\n            aria-expanded={open}\n            className=\"w-64 justify-between font-normal\"\n          >\n            {selected ? (\n              <span className=\"flex items-center gap-2\">\n                <Avatar className=\"size-5\">\n                  <AvatarFallback className=\"text-[10px]\">\n                    {initials(selected.name)}\n                  </AvatarFallback>\n                </Avatar>\n                {selected.name}\n              </span>\n            ) : (\n              <span className=\"text-muted-foreground\">Assign member...</span>\n            )}\n            <ChevronsUpDownIcon className=\"text-muted-foreground\" />\n          </Button>\n        }\n      />\n      <PopoverContent className=\"w-64 p-0\" align=\"start\">\n        <Command>\n          <CommandInput placeholder=\"Search member...\" />\n          <CommandList>\n            <CommandEmpty>No member found.</CommandEmpty>\n            <CommandGroup>\n              {members.map((member) => (\n                <CommandItem\n                  key={member.value}\n                  value={member.name}\n                  data-checked={value === member.value}\n                  onSelect={() => {\n                    setValue(member.value === value ? '' : member.value)\n                    setOpen(false)\n                  }}\n                >\n                  <Avatar className=\"size-7\">\n                    <AvatarFallback className=\"text-xs\">\n                      {initials(member.name)}\n                    </AvatarFallback>\n                  </Avatar>\n                  <div className=\"flex flex-col\">\n                    <span className=\"text-sm\">{member.name}</span>\n                    <span className=\"text-muted-foreground text-xs\">\n                      {member.email}\n                    </span>\n                  </div>\n                </CommandItem>\n              ))}\n            </CommandGroup>\n          </CommandList>\n        </Command>\n      </PopoverContent>\n    </Popover>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/flx/patterns/command/command-09.tsx"
    }
  ],
  "type": "registry:block"
}