combobox-dropdown-menu.json — ui Source File

Source Code

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "combobox-dropdown-menu",
  "registryDependencies": [
    "command",
    "dropdown-menu",
    "button"
  ],
  "files": [
    {
      "path": "registry/new-york-v4/examples/combobox-dropdown-menu.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { MoreHorizontal } from \"lucide-react\"\n\nimport { Button } from \"@/registry/new-york-v4/ui/button\"\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"@/registry/new-york-v4/ui/command\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/new-york-v4/ui/dropdown-menu\"\n\nconst labels = [\n  \"feature\",\n  \"bug\",\n  \"enhancement\",\n  \"documentation\",\n  \"design\",\n  \"question\",\n  \"maintenance\",\n]\n\nexport default function ComboboxDropdownMenu() {\n  const [label, setLabel] = React.useState(\"feature\")\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <div className=\"flex w-full flex-col items-start justify-between rounded-md border px-4 py-3 sm:flex-row sm:items-center\">\n      <p className=\"text-sm leading-none font-medium\">\n        <span className=\"bg-primary text-primary-foreground mr-2 rounded-lg px-2 py-1 text-xs\">\n          {label}\n        </span>\n        <span className=\"text-muted-foreground\">Create a new project</span>\n      </p>\n      <DropdownMenu open={open} onOpenChange={setOpen}>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"ghost\" size=\"sm\">\n            <MoreHorizontal />\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent align=\"end\" className=\"w-[200px]\">\n          <DropdownMenuLabel>Actions</DropdownMenuLabel>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>Assign to...</DropdownMenuItem>\n            <DropdownMenuItem>Set due date...</DropdownMenuItem>\n            <DropdownMenuSeparator />\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>Apply label</DropdownMenuSubTrigger>\n              <DropdownMenuSubContent className=\"p-0\">\n                <Command>\n                  <CommandInput\n                    placeholder=\"Filter label...\"\n                    autoFocus={true}\n                    className=\"h-9\"\n                  />\n                  <CommandList>\n                    <CommandEmpty>No label found.</CommandEmpty>\n                    <CommandGroup>\n                      {labels.map((label) => (\n                        <CommandItem\n                          key={label}\n                          value={label}\n                          onSelect={(value) => {\n                            setLabel(value)\n                            setOpen(false)\n                          }}\n                        >\n                          {label}\n                        </CommandItem>\n                      ))}\n                    </CommandGroup>\n                  </CommandList>\n                </Command>\n              </DropdownMenuSubContent>\n            </DropdownMenuSub>\n            <DropdownMenuSeparator />\n            <DropdownMenuItem className=\"text-red-600\">\n              Delete\n              <DropdownMenuShortcut>⌘⌫</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </div>\n  )\n}\n",
      "type": "registry:example"
    }
  ],
  "type": "registry:example"
}