{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"c-input-group-36","type":"registry:block","title":"API request input with method selector and send action","description":"API request input with method selector and send action","dependencies":["cn"],"registryDependencies":["dropdown-menu","field","input-group"],"files":[{"path":"c-input-group-36.tsx","type":"registry:block","content":"\"use client\"\n\nimport { useState } from \"react\"\n\nimport { cn } from \"cn\"\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 httpMethodColors = {\n  GET: \"text-emerald-600 dark:text-emerald-400\",\n  POST: \"text-blue-500\",\n  PUT: \"text-amber-500\",\n  PATCH: \"text-violet-500\",\n  DELETE: \"text-destructive\",\n} as const\n\ntype HttpMethod = keyof typeof httpMethodColors\n\nconst httpMethods = Object.keys(httpMethodColors) as HttpMethod[]\n\nexport function Pattern() {\n  const [method, setMethod] = useState<HttpMethod>(\"GET\")\n\n  return (\n    <Field className=\"max-w-md\">\n      <InputGroup>\n        <InputGroupAddon>\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              render={\n                <InputGroupButton\n                  variant=\"ghost\"\n                  className={cn(\n                    \"gap-1.5 font-mono text-xs\",\n                    httpMethodColors[method]\n                  )}\n                  aria-label={`HTTP method: ${method}`}\n                />\n              }\n            >\n              {method}\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=\"start\" className=\"w-28\">\n              <DropdownMenuGroup>\n                {httpMethods.map((item) => (\n                  <DropdownMenuItem\n                    key={item}\n                    className={cn(\n                      \"font-mono text-xs font-semibold\",\n                      httpMethodColors[item]\n                    )}\n                    onSelect={() => setMethod(item)}\n                  >\n                    {item}\n                  </DropdownMenuItem>\n                ))}\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </InputGroupAddon>\n\n        <InputGroupInput\n          defaultValue=\"/v1/agents/run\"\n          className=\"font-mono text-xs\"\n          aria-label=\"API endpoint path\"\n        />\n\n        <InputGroupAddon align=\"inline-end\">\n          <InputGroupButton size=\"xs\" aria-label=\"Send request\">\n            Send\n          </InputGroupButton>\n        </InputGroupAddon>\n      </InputGroup>\n    </Field>\n  )\n}","target":"components/examples/c-input-group-36.tsx"}],"meta":{"order":36}}