{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"c-input-group-38","type":"registry:block","title":"Company search input with region selector","description":"Company search input with region selector","dependencies":[],"registryDependencies":["dropdown-menu","field","input-group"],"files":[{"path":"c-input-group-38.tsx","type":"registry:block","content":"\"use client\"\n\nimport { useState } from \"react\"\n\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { Field } from \"@/components/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"@/components/ui/input-group\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst regions = [\"Global\", \"United States\", \"Europe\", \"APAC\"]\n\nexport function Pattern() {\n  const [searchQuery, setSearchQuery] = useState(\"\")\n  const [region, setRegion] = useState(regions[0])\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 companies...\"\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          <DropdownMenu>\n            <DropdownMenuTrigger\n              render={\n                <InputGroupButton\n                  variant=\"ghost\"\n                  size=\"xs\"\n                  className=\"gap-1.5\"\n                  aria-label=\"Select region\"\n                />\n              }\n            >\n              <IconPlaceholder\n                lucide=\"GlobeIcon\"\n                tabler=\"IconWorld\"\n                hugeicons=\"Globe01Icon\"\n                phosphor=\"GlobeIcon\"\n                remixicon=\"RiGlobalLine\"\n                className=\"size-3.5\"\n                aria-hidden=\"true\"\n              />\n              {region}\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDown01Icon\"\n                phosphor=\"CaretDownIcon\"\n                remixicon=\"RiArrowDownSLine\"\n                className=\"size-3 opacity-60\"\n                aria-hidden=\"true\"\n              />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" className=\"w-32\">\n              <DropdownMenuGroup>\n                {regions.map((item) => (\n                  <DropdownMenuItem key={item} onSelect={() => setRegion(item)}>\n                    {item}\n                  </DropdownMenuItem>\n                ))}\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </InputGroupAddon>\n      </InputGroup>\n    </Field>\n  )\n}","target":"components/examples/c-input-group-38.tsx"}],"meta":{"order":38}}