combobox-responsive.json — ui Source File

Source Code

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "combobox-responsive",
  "type": "registry:example",
  "author": "shadcn (https://ui.shadcn.com)",
  "registryDependencies": [
    "combobox",
    "popover",
    "drawer"
  ],
  "files": [
    {
      "path": "examples/combobox-responsive.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { useMediaQuery } from \"@/hooks/use-media-query\"\nimport { Button } from \"@/registry/new-york/ui/button\"\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"@/registry/new-york/ui/command\"\nimport {\n  Drawer,\n  DrawerContent,\n  DrawerTrigger,\n} from \"@/registry/new-york/ui/drawer\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/new-york/ui/popover\"\n\ntype Status = {\n  value: string\n  label: string\n}\n\nconst statuses: Status[] = [\n  {\n    value: \"backlog\",\n    label: \"Backlog\",\n  },\n  {\n    value: \"todo\",\n    label: \"Todo\",\n  },\n  {\n    value: \"in progress\",\n    label: \"In Progress\",\n  },\n  {\n    value: \"done\",\n    label: \"Done\",\n  },\n  {\n    value: \"canceled\",\n    label: \"Canceled\",\n  },\n]\n\nexport default function ComboBoxResponsive() {\n  const [open, setOpen] = React.useState(false)\n  const isDesktop = useMediaQuery(\"(min-width: 768px)\")\n  const [selectedStatus, setSelectedStatus] = React.useState<Status | null>(\n    null\n  )\n\n  if (isDesktop) {\n    return (\n      <Popover open={open} onOpenChange={setOpen}>\n        <PopoverTrigger asChild>\n          <Button variant=\"outline\" className=\"w-[150px] justify-start\">\n            {selectedStatus ? <>{selectedStatus.label}</> : <>+ Set status</>}\n          </Button>\n        </PopoverTrigger>\n        <PopoverContent className=\"w-[200px] p-0\" align=\"start\">\n          <StatusList setOpen={setOpen} setSelectedStatus={setSelectedStatus} />\n        </PopoverContent>\n      </Popover>\n    )\n  }\n\n  return (\n    <Drawer open={open} onOpenChange={setOpen}>\n      <DrawerTrigger asChild>\n        <Button variant=\"outline\" className=\"w-[150px] justify-start\">\n          {selectedStatus ? <>{selectedStatus.label}</> : <>+ Set status</>}\n        </Button>\n      </DrawerTrigger>\n      <DrawerContent>\n        <div className=\"mt-4 border-t\">\n          <StatusList setOpen={setOpen} setSelectedStatus={setSelectedStatus} />\n        </div>\n      </DrawerContent>\n    </Drawer>\n  )\n}\n\nfunction StatusList({\n  setOpen,\n  setSelectedStatus,\n}: {\n  setOpen: (open: boolean) => void\n  setSelectedStatus: (status: Status | null) => void\n}) {\n  return (\n    <Command>\n      <CommandInput placeholder=\"Filter status...\" />\n      <CommandList>\n        <CommandEmpty>No results found.</CommandEmpty>\n        <CommandGroup>\n          {statuses.map((status) => (\n            <CommandItem\n              key={status.value}\n              value={status.value}\n              onSelect={(value) => {\n                setSelectedStatus(\n                  statuses.find((priority) => priority.value === value) || null\n                )\n                setOpen(false)\n              }}\n            >\n              {status.label}\n            </CommandItem>\n          ))}\n        </CommandGroup>\n      </CommandList>\n    </Command>\n  )\n}\n",
      "type": "registry:example",
      "target": ""
    }
  ]
}