{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"c-input-group-32","type":"registry:block","title":"Member row with avatar, email and role selection","description":"Member row with avatar, email and role selection","dependencies":[],"registryDependencies":["avatar","dropdown-menu","field","input-group"],"files":[{"path":"c-input-group-32.tsx","type":"registry:block","content":"\"use client\"\n\nimport { useState } from \"react\"\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/components/ui/avatar\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\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 roles = [\"Admin\", \"Member\", \"Viewer\"]\n\nexport function Pattern() {\n  const [role, setRole] = useState(\"Admin\")\n\n  return (\n    <Field className=\"max-w-xs\">\n      <InputGroup>\n        <InputGroupAddon className=\"pr-1\">\n          <Avatar className=\"size-5\">\n            <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"Avatar\" />\n            <AvatarFallback>LR</AvatarFallback>\n          </Avatar>\n        </InputGroupAddon>\n\n        <InputGroupInput defaultValue=\"@shadcn\" className=\"pl-1!\" />\n\n        <InputGroupAddon align=\"inline-end\">\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              render={\n                <InputGroupButton variant=\"ghost\" className=\"h-7 text-xs\" />\n              }\n            >\n              {role}\n              <IconPlaceholder\n                lucide=\"ChevronDownIcon\"\n                tabler=\"IconChevronDown\"\n                hugeicons=\"ArrowDown01Icon\"\n                phosphor=\"CaretDownIcon\"\n                remixicon=\"RiArrowDownSLine\"\n                className=\"size-3.5 opacity-60\"\n              />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent align=\"end\" className=\"min-w-32\">\n              {roles.map((r) => (\n                <DropdownMenuItem key={r} onClick={() => setRole(r)}>\n                  {r}\n                </DropdownMenuItem>\n              ))}\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </InputGroupAddon>\n      </InputGroup>\n    </Field>\n  )\n}","target":"components/examples/c-input-group-32.tsx"}],"meta":{"order":32}}