{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"c-input-group-34","type":"registry:block","title":"Pill-shaped AI prompt bar with voice and audio icons","description":"Pill-shaped AI prompt bar with voice and audio icons","dependencies":[],"registryDependencies":["dropdown-menu","field","input-group"],"files":[{"path":"c-input-group-34.tsx","type":"registry:block","content":"import {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\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\nexport function Pattern() {\n  return (\n    <Field className=\"max-w-3xl\">\n      <InputGroup className=\"bg-background rounded-full h-14 border p-1.5\">\n        <InputGroupAddon className=\"border-none pl-2\">\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              render={\n                <InputGroupButton\n                  variant=\"ghost\"\n                  size=\"icon-sm\"\n                  className=\"text-muted-foreground hover:text-foreground rounded-full size-10\"\n                />\n              }\n            >\n              <IconPlaceholder\n                lucide=\"PlusIcon\"\n                tabler=\"IconPlus\"\n                hugeicons=\"PlusSignIcon\"\n                phosphor=\"PlusIcon\"\n                remixicon=\"RiAddLine\"\n                className=\"size-6\"\n              />\n            </DropdownMenuTrigger>\n            <DropdownMenuContent\n              side=\"top\"\n              align=\"start\"\n              sideOffset={12}\n              className=\"w-56\"\n            >\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"PaperclipIcon\"\n                  tabler=\"IconPaperclip\"\n                  hugeicons=\"Attachment02Icon\"\n                  phosphor=\"PaperclipIcon\"\n                  remixicon=\"RiAttachment2\"\n                />\n                <span>Add photos & files</span>\n              </DropdownMenuItem>\n              <DropdownMenuSeparator className=\"-mx-3\" />\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"ImageIcon\"\n                  tabler=\"IconPhoto\"\n                  hugeicons=\"ImageIcon\"\n                  phosphor=\"ImageIcon\"\n                  remixicon=\"RiImageLine\"\n                />\n                <span>Create image</span>\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"BrainIcon\"\n                  tabler=\"IconBrain\"\n                  hugeicons=\"AiBrain01Icon\"\n                  phosphor=\"BrainIcon\"\n                  remixicon=\"RiBrainLine\"\n                />\n                <span>Thinking</span>\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SearchIcon\"\n                  tabler=\"IconSearch\"\n                  hugeicons=\"Search01Icon\"\n                  phosphor=\"MagnifyingGlassIcon\"\n                  remixicon=\"RiSearchLine\"\n                />\n                <span>Deep research</span>\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"ShoppingBagIcon\"\n                  tabler=\"IconShoppingBag\"\n                  hugeicons=\"ShoppingBag01Icon\"\n                  phosphor=\"ShoppingBagOpenIcon\"\n                  remixicon=\"RiShoppingBag3Line\"\n                />\n                <span>Shopping research</span>\n              </DropdownMenuItem>\n              <DropdownMenuSub>\n                <DropdownMenuSubTrigger>\n                  <IconPlaceholder\n                    lucide=\"SparklesIcon\"\n                    tabler=\"IconSparkles\"\n                    hugeicons=\"SparklesIcon\"\n                    phosphor=\"SparkleIcon\"\n                    remixicon=\"RiSparklingLine\"\n                  />\n                  <span>More</span>\n                </DropdownMenuSubTrigger>\n                <DropdownMenuSubContent className=\"w-44\">\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"BookOpenIcon\"\n                      tabler=\"IconBook\"\n                      hugeicons=\"BookOpen01Icon\"\n                      phosphor=\"BookOpenIcon\"\n                      remixicon=\"RiBookOpenLine\"\n                    />\n                    <span>Study and learn</span>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"GlobeIcon\"\n                      tabler=\"IconWorld\"\n                      hugeicons=\"Globe02Icon\"\n                      phosphor=\"GlobeSimpleIcon\"\n                      remixicon=\"RiGlobalLine\"\n                    />\n                    <span>Web search</span>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"LayoutDashboardIcon\"\n                      tabler=\"IconLayoutDashboard\"\n                      hugeicons=\"DashboardSquare02Icon\"\n                      phosphor=\"LayoutIcon\"\n                      remixicon=\"RiDashboardLine\"\n                    />\n                    <span>Canvas</span>\n                  </DropdownMenuItem>\n                  <DropdownMenuItem>\n                    <IconPlaceholder\n                      lucide=\"AppWindowIcon\"\n                      tabler=\"IconAppWindow\"\n                      hugeicons=\"BrowserIcon\"\n                      phosphor=\"AppWindowIcon\"\n                      remixicon=\"RiWindowLine\"\n                    />\n                    <span>Explore apps</span>\n                  </DropdownMenuItem>\n                </DropdownMenuSubContent>\n              </DropdownMenuSub>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </InputGroupAddon>\n\n        <InputGroupInput\n          placeholder=\"Ask anything\"\n          className=\"placeholder:text-muted-foreground/70 border-none px-2 text-lg shadow-none focus-visible:ring-0\"\n        />\n\n        <InputGroupAddon align=\"inline-end\" className=\"gap-2 border-none pr-1\">\n          <InputGroupButton\n            variant=\"ghost\"\n            className=\"text-muted-foreground hover:text-foreground rounded-full size-11\"\n          >\n            <IconPlaceholder\n              lucide=\"MicIcon\"\n              tabler=\"IconMicrophone\"\n              hugeicons=\"Mic02Icon\"\n              phosphor=\"MicrophoneIcon\"\n              remixicon=\"RiMicLine\"\n              className=\"size-5\"\n            />\n          </InputGroupButton>\n          <InputGroupButton\n            variant=\"default\"\n            className=\"rounded-full size-11 bg-black text-white hover:bg-black/90\"\n          >\n            <IconPlaceholder\n              lucide=\"AudioLinesIcon\"\n              tabler=\"IconBrandSoundcloud\"\n              hugeicons=\"AudioWave01Icon\"\n              phosphor=\"WaveformIcon\"\n              remixicon=\"RiSoundcloudLine\"\n              className=\"size-5\"\n            />\n          </InputGroupButton>\n        </InputGroupAddon>\n      </InputGroup>\n    </Field>\n  )\n}","target":"components/examples/c-input-group-34.tsx"}],"meta":{"order":34,"gridSize":1}}