{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"c-input-group-37","type":"registry:block","title":"Order search input with status filter","description":"Order search input with status filter","dependencies":[],"registryDependencies":["checkbox","field","input-group","label","popover"],"files":[{"path":"c-input-group-37.tsx","type":"registry:block","content":"\"use client\"\n\nimport { useState } from \"react\"\n\nimport { Checkbox } from \"@/components/ui/checkbox\"\nimport { Field } from \"@/components/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"@/components/ui/input-group\"\nimport { Label } from \"@/components/ui/label\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/components/ui/popover\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst statuses = [\"Pending\", \"Shipped\", \"Cancelled\"] as const\n\ntype Status = (typeof statuses)[number]\n\nfunction toggleStatus(values: Status[], value: Status) {\n  return values.includes(value)\n    ? values.filter((item) => item !== value)\n    : [...values, value]\n}\n\nexport function Pattern() {\n  const [searchQuery, setSearchQuery] = useState(\"\")\n  const [selectedStatuses, setSelectedStatuses] = useState<Status[]>([])\n\n  return (\n    <Field className=\"max-w-sm\">\n      <InputGroup>\n        <InputGroupAddon align=\"inline-start\">\n          <IconPlaceholder\n            lucide=\"SearchIcon\"\n            tabler=\"IconSearch\"\n            hugeicons=\"Search01Icon\"\n            phosphor=\"MagnifyingGlassIcon\"\n            remixicon=\"RiSearchLine\"\n            aria-hidden=\"true\"\n          />\n        </InputGroupAddon>\n\n        <InputGroupInput\n          placeholder=\"Search orders...\"\n          value={searchQuery}\n          onChange={(event) => setSearchQuery(event.target.value)}\n        />\n\n        <InputGroupAddon align=\"inline-end\" className=\"gap-1\">\n          {searchQuery.length > 0 ? (\n            <InputGroupButton\n              aria-label=\"Clear search\"\n              size=\"icon-xs\"\n              variant=\"ghost\"\n              onClick={() => setSearchQuery(\"\")}\n            >\n              <IconPlaceholder\n                lucide=\"XIcon\"\n                tabler=\"IconX\"\n                hugeicons=\"Cancel01Icon\"\n                phosphor=\"XIcon\"\n                remixicon=\"RiCloseLine\"\n                aria-hidden=\"true\"\n              />\n            </InputGroupButton>\n          ) : null}\n\n          <Popover>\n            <PopoverTrigger\n              render={\n                <InputGroupButton\n                  variant=\"ghost\"\n                  size=\"xs\"\n                  className=\"gap-1.5\"\n                  aria-label=\"Filter order status\"\n                />\n              }\n            >\n              <IconPlaceholder\n                lucide=\"ListFilterIcon\"\n                tabler=\"IconFilter\"\n                hugeicons=\"FilterIcon\"\n                phosphor=\"FunnelIcon\"\n                remixicon=\"RiFilterLine\"\n                className=\"size-3.5\"\n                aria-hidden=\"true\"\n              />\n              Status\n              {selectedStatuses.length > 0 ? (\n                <span className=\"text-muted-foreground tabular-nums\">\n                  {selectedStatuses.length}\n                </span>\n              ) : null}\n            </PopoverTrigger>\n            <PopoverContent align=\"end\" className=\"w-40 p-3\">\n              <div className=\"flex flex-col gap-2\">\n                {statuses.map((status) => (\n                  <div key={status} className=\"flex items-center gap-2.5\">\n                    <Checkbox\n                      id={`order-status-${status}`}\n                      checked={selectedStatuses.includes(status)}\n                      onCheckedChange={() =>\n                        setSelectedStatuses((previous) =>\n                          toggleStatus(previous, status)\n                        )\n                      }\n                    />\n                    <Label\n                      htmlFor={`order-status-${status}`}\n                      className=\"text-sm font-normal\"\n                    >\n                      {status}\n                    </Label>\n                  </div>\n                ))}\n              </div>\n            </PopoverContent>\n          </Popover>\n        </InputGroupAddon>\n      </InputGroup>\n    </Field>\n  )\n}","target":"components/examples/c-input-group-37.tsx"}],"meta":{"order":37}}