diff --git a/apps/v4/public/r/styles/base-lyra/github.json b/apps/v4/public/r/styles/base-lyra/github.json
index 6ad28c2731..e4be7a788a 100644
--- a/apps/v4/public/r/styles/base-lyra/github.json
+++ b/apps/v4/public/r/styles/base-lyra/github.json
@@ -30,7 +30,7 @@
   "files": [
     {
       "path": "registry/base-lyra/blocks/github.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-lyra/components/example\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/base-lyra/ui/avatar\"\nimport { Badge } from \"@/registry/base-lyra/ui/badge\"\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-lyra/ui/card\"\nimport { Checkbox } from \"@/registry/base-lyra/ui/checkbox\"\nimport {\n  Combobox,\n  ComboboxChip,\n  ComboboxChips,\n  ComboboxChipsInput,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxItem,\n  ComboboxList,\n  ComboboxValue,\n  useComboboxAnchor,\n} from \"@/registry/base-lyra/ui/combobox\"\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"@/registry/base-lyra/ui/command\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/base-lyra/ui/drawer\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-lyra/ui/dropdown-menu\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/base-lyra/ui/empty\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n} from \"@/registry/base-lyra/ui/field\"\nimport { Input } from \"@/registry/base-lyra/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupTextarea,\n} from \"@/registry/base-lyra/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemGroup,\n  ItemMedia,\n  ItemSeparator,\n  ItemTitle,\n} from \"@/registry/base-lyra/ui/item\"\nimport { Kbd } from \"@/registry/base-lyra/ui/kbd\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/base-lyra/ui/native-select\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/base-lyra/ui/popover\"\nimport { Separator } from \"@/registry/base-lyra/ui/separator\"\nimport { Spinner } from \"@/registry/base-lyra/ui/spinner\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/base-lyra/ui/tabs\"\nimport { Textarea } from \"@/registry/base-lyra/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/base-lyra/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function GithubBlock() {\n  return (\n    <ExampleWrapper>\n      <CodespacesCard />\n      <AssignIssue />\n      <Navbar />\n      <RepositoryToolbar />\n      <Profile />\n      <ContributionsActivity />\n      <Contributors />\n    </ExampleWrapper>\n  )\n}\nfunction CodespacesCard() {\n  const [isCreatingCodespace, setIsCreatingCodespace] = React.useState(false)\n  return (\n    <Example title=\"Codespaces\" className=\"min-h-[550px] lg:p-12\">\n      <Card className=\"mx-auto w-full max-w-sm\" size=\"sm\">\n        <CardContent>\n          <Tabs defaultValue=\"codespaces\">\n            <TabsList className=\"w-full\">\n              <TabsTrigger value=\"codespaces\">Codespaces</TabsTrigger>\n              <TabsTrigger value=\"local\">Local</TabsTrigger>\n            </TabsList>\n            <TabsContent value=\"codespaces\">\n              <Item size=\"sm\" className=\"px-1 pt-2\">\n                <ItemContent>\n                  <ItemTitle>Codespaces</ItemTitle>\n                  <ItemDescription>\n                    Your workspaces in the cloud\n                  </ItemDescription>\n                </ItemContent>\n                <ItemActions>\n                  <Tooltip>\n                    <TooltipTrigger\n                      render={<Button variant=\"ghost\" size=\"icon-sm\" />}\n                    >\n                      <IconPlaceholder\n                        lucide=\"PlusIcon\"\n                        tabler=\"IconPlus\"\n                        hugeicons=\"PlusSignIcon\"\n                        phosphor=\"PlusIcon\"\n                        remixicon=\"RiAddLine\"\n                      />\n                    </TooltipTrigger>\n                    <TooltipContent side=\"bottom\">\n                      Create a codespace on main\n                    </TooltipContent>\n                  </Tooltip>\n                  <DropdownMenu>\n                    <Tooltip>\n                      <TooltipTrigger\n                        render={\n                          <DropdownMenuTrigger\n                            render={<Button variant=\"ghost\" size=\"icon-sm\" />}\n                          />\n                        }\n                      >\n                        <IconPlaceholder\n                          lucide=\"MoreHorizontalIcon\"\n                          tabler=\"IconDots\"\n                          hugeicons=\"MoreHorizontalCircle01Icon\"\n                          phosphor=\"DotsThreeOutlineIcon\"\n                          remixicon=\"RiMoreLine\"\n                        />\n                      </TooltipTrigger>\n                      <TooltipContent side=\"bottom\">\n                        Codespace repository configuration\n                      </TooltipContent>\n                    </Tooltip>\n                    <DropdownMenuContent align=\"end\" className=\"w-56\">\n                      <DropdownMenuGroup>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"PlusIcon\"\n                            tabler=\"IconPlus\"\n                            hugeicons=\"PlusSignIcon\"\n                            phosphor=\"PlusIcon\"\n                            remixicon=\"RiAddLine\"\n                          />\n                          New with options...\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"ContainerIcon\"\n                            tabler=\"IconBox\"\n                            hugeicons=\"CubeIcon\"\n                            phosphor=\"CubeIcon\"\n                            remixicon=\"RiBox1Line\"\n                          />\n                          Configure dev container\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"ZapIcon\"\n                            tabler=\"IconBolt\"\n                            hugeicons=\"ZapIcon\"\n                            phosphor=\"LightningIcon\"\n                            remixicon=\"RiFlashlightLine\"\n                          />\n                          Set up prebuilds\n                        </DropdownMenuItem>\n                      </DropdownMenuGroup>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuGroup>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"ServerIcon\"\n                            tabler=\"IconServer\"\n                            hugeicons=\"ServerStackIcon\"\n                            phosphor=\"HardDrivesIcon\"\n                            remixicon=\"RiHardDriveLine\"\n                          />\n                          Manage codespaces\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"ShareIcon\"\n                            tabler=\"IconShare2\"\n                            hugeicons=\"Share03Icon\"\n                            phosphor=\"ShareIcon\"\n                            remixicon=\"RiShareLine\"\n                          />\n                          Share deep link\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"InfoIcon\"\n                            tabler=\"IconInfoCircle\"\n                            hugeicons=\"AlertCircleIcon\"\n                            phosphor=\"InfoIcon\"\n                            remixicon=\"RiInformationLine\"\n                          />\n                          What are codespaces?\n                        </DropdownMenuItem>\n                      </DropdownMenuGroup>\n                    </DropdownMenuContent>\n                  </DropdownMenu>\n                </ItemActions>\n              </Item>\n              <Separator className=\"-mx-2 my-2 w-auto!\" />\n              <Empty className=\"p-4\">\n                <EmptyHeader>\n                  <EmptyMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"ServerIcon\"\n                      tabler=\"IconServer\"\n                      hugeicons=\"ServerStackIcon\"\n                      phosphor=\"HardDrivesIcon\"\n                      remixicon=\"RiHardDriveLine\"\n                    />\n                  </EmptyMedia>\n                  <EmptyTitle>No codespaces</EmptyTitle>\n                  <EmptyDescription>\n                    You don&apos;t have any codespaces with this repository\n                    checked out\n                  </EmptyDescription>\n                </EmptyHeader>\n                <EmptyContent>\n                  <Button\n                    size=\"sm\"\n                    onClick={() => {\n                      setIsCreatingCodespace(true)\n                      setTimeout(() => {\n                        setIsCreatingCodespace(false)\n                      }, 2000)\n                    }}\n                    disabled={isCreatingCodespace}\n                  >\n                    {isCreatingCodespace ? (\n                      <Spinner data-icon=\"inline-start\" />\n                    ) : (\n                      \"\"\n                    )}\n                    Create Codespace\n                  </Button>\n                  <a\n                    href=\"#learn-more\"\n                    className=\"text-muted-foreground text-xs underline underline-offset-4\"\n                  >\n                    Learn more about codespaces\n                  </a>\n                </EmptyContent>\n              </Empty>\n              <Separator className=\"-mx-2 my-2 w-auto!\" />\n              <div className=\"text-muted-foreground p-1.5 text-xs\">\n                Codespace usage for this repository is paid for by{\" \"}\n                <span className=\"font-medium\">shadcn</span>.\n              </div>\n            </TabsContent>\n            <TabsContent value=\"local\">\n              <Item size=\"sm\" className=\"hidden p-0\">\n                <ItemContent>\n                  <ItemTitle className=\"gap-2\">\n                    <IconPlaceholder\n                      lucide=\"TerminalIcon\"\n                      tabler=\"IconTerminal\"\n                      hugeicons=\"ComputerTerminal01Icon\"\n                      phosphor=\"TerminalIcon\"\n                      remixicon=\"RiTerminalBoxLine\"\n                      className=\"size-4\"\n                    />\n                    Clone\n                  </ItemTitle>\n                </ItemContent>\n                <ItemActions>\n                  <Tooltip>\n                    <TooltipTrigger\n                      render={<Button variant=\"ghost\" size=\"icon\" />}\n                    >\n                      <IconPlaceholder\n                        lucide=\"InfoIcon\"\n                        tabler=\"IconInfoCircle\"\n                        hugeicons=\"AlertCircleIcon\"\n                        phosphor=\"InfoIcon\"\n                        remixicon=\"RiInformationLine\"\n                      />\n                    </TooltipTrigger>\n                    <TooltipContent side=\"left\">\n                      Which remote URL should I use?\n                    </TooltipContent>\n                  </Tooltip>\n                </ItemActions>\n              </Item>\n              <Tabs defaultValue=\"https\">\n                <TabsList\n                  variant=\"line\"\n                  className=\"w-full justify-start border-b *:[button]:flex-0\"\n                >\n                  <TabsTrigger value=\"https\">HTTPS</TabsTrigger>\n                  <TabsTrigger value=\"ssh\">SSH</TabsTrigger>\n                  <TabsTrigger value=\"cli\">GitHub CLI</TabsTrigger>\n                </TabsList>\n                <div className=\"bg-muted/30 rounded-md border p-2\">\n                  <TabsContent value=\"https\">\n                    <Field className=\"gap-2\">\n                      <FieldLabel htmlFor=\"https-url\" className=\"sr-only\">\n                        HTTPS URL\n                      </FieldLabel>\n                      <InputGroup>\n                        <InputGroupAddon align=\"inline-end\">\n                          <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                              phosphor=\"CopyIcon\"\n                              remixicon=\"RiFileCopyLine\"\n                            />\n                          </InputGroupButton>\n                        </InputGroupAddon>\n                        <InputGroupInput\n                          id=\"https-url\"\n                          defaultValue=\"https://github.com/shadcn-ui/ui.git\"\n                          readOnly\n                        />\n                      </InputGroup>\n                      <FieldDescription>\n                        Clone using the web URL.\n                      </FieldDescription>\n                    </Field>\n                  </TabsContent>\n                  <TabsContent value=\"ssh\">\n                    <Field className=\"gap-2\">\n                      <FieldLabel htmlFor=\"ssh-url\" className=\"sr-only\">\n                        SSH URL\n                      </FieldLabel>\n                      <InputGroup>\n                        <InputGroupAddon align=\"inline-end\">\n                          <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                              phosphor=\"CopyIcon\"\n                              remixicon=\"RiFileCopyLine\"\n                            />\n                          </InputGroupButton>\n                        </InputGroupAddon>\n                        <InputGroupInput\n                          id=\"ssh-url\"\n                          defaultValue=\"git@github.com:shadcn-ui/ui.git\"\n                          readOnly\n                        />\n                      </InputGroup>\n                      <FieldDescription>\n                        Use a password-protected SSH key.\n                      </FieldDescription>\n                    </Field>\n                  </TabsContent>\n                  <TabsContent value=\"cli\">\n                    <Field className=\"gap-2\">\n                      <FieldLabel htmlFor=\"cli-command\" className=\"sr-only\">\n                        CLI Command\n                      </FieldLabel>\n                      <InputGroup>\n                        <InputGroupAddon align=\"inline-end\">\n                          <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                              phosphor=\"CopyIcon\"\n                              remixicon=\"RiFileCopyLine\"\n                            />\n                          </InputGroupButton>\n                        </InputGroupAddon>\n                        <InputGroupInput\n                          id=\"cli-command\"\n                          defaultValue=\"gh repo clone shadcn-ui/ui\"\n                          readOnly\n                        />\n                      </InputGroup>\n                      <FieldDescription>\n                        Work fast with our official CLI.{\" \"}\n                        <a href=\"#learn-more\">Learn more</a>\n                      </FieldDescription>\n                    </Field>\n                  </TabsContent>\n                </div>\n              </Tabs>\n              <Separator className=\"-mx-2 my-2 w-auto!\" />\n              <div className=\"flex flex-col\">\n                <Button\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  className=\"justify-start gap-1.5\"\n                >\n                  <IconPlaceholder\n                    lucide=\"MonitorIcon\"\n                    tabler=\"IconDeviceDesktop\"\n                    hugeicons=\"ComputerIcon\"\n                    phosphor=\"MonitorIcon\"\n                    remixicon=\"RiComputerLine\"\n                    data-icon=\"inline-start\"\n                  />\n                  Open with GitHub Desktop\n                </Button>\n                <Button\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  className=\"justify-start gap-1.5\"\n                >\n                  <IconPlaceholder\n                    lucide=\"DownloadIcon\"\n                    tabler=\"IconDownload\"\n                    hugeicons=\"DownloadIcon\"\n                    phosphor=\"DownloadIcon\"\n                    remixicon=\"RiDownloadLine\"\n                    data-icon=\"inline-start\"\n                  />\n                  Download ZIP\n                </Button>\n              </div>\n            </TabsContent>\n          </Tabs>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\nfunction RepositoryToolbar() {\n  const [selectedBranch, setSelectedBranch] = React.useState(\"main\")\n  return (\n    <Example title=\"Repository Toolbar\">\n      <div className=\"flex items-center gap-2\">\n        <InputGroup>\n          <InputGroupInput placeholder=\"Go to file\" />\n          <InputGroupAddon align=\"inline-start\">\n            <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n              <IconPlaceholder\n                lucide=\"SearchIcon\"\n                tabler=\"IconSearch\"\n                hugeicons=\"SearchIcon\"\n                phosphor=\"MagnifyingGlassIcon\"\n                remixicon=\"RiSearchLine\"\n              />\n            </InputGroupButton>\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">\n            <Kbd>t</Kbd>\n          </InputGroupAddon>\n        </InputGroup>\n        <DropdownMenu>\n          <DropdownMenuTrigger render={<Button variant=\"outline\" />}>\n            Add File\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDown01Icon\"\n              phosphor=\"CaretDownIcon\"\n              remixicon=\"RiArrowDownSLine\"\n              data-icon=\"inline-end\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"PlusIcon\"\n                  tabler=\"IconPlus\"\n                  hugeicons=\"PlusSignIcon\"\n                  phosphor=\"PlusIcon\"\n                  remixicon=\"RiAddLine\"\n                />\n                Create new file\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"UploadIcon\"\n                  hugeicons=\"Upload01Icon\"\n                  tabler=\"IconUpload\"\n                  phosphor=\"UploadIcon\"\n                  remixicon=\"RiUploadLine\"\n                />\n                Upload files\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <Popover>\n          <Tooltip>\n            <TooltipTrigger\n              render={\n                <PopoverTrigger\n                  render={<Button variant=\"outline\" size=\"icon\" />}\n                />\n              }\n            >\n              <IconPlaceholder\n                lucide=\"CloudCogIcon\"\n                hugeicons=\"AiCloud01Icon\"\n                tabler=\"IconCloudCog\"\n                phosphor=\"CloudArrowUpIcon\"\n                remixicon=\"RiUploadCloudLine\"\n              />\n            </TooltipTrigger>\n            <TooltipContent>New Agent Task</TooltipContent>\n          </Tooltip>\n          <PopoverContent side=\"bottom\" align=\"end\" className=\"w-96\">\n            <Field>\n              <FieldLabel htmlFor=\"new-agent-task\">New Agent Task</FieldLabel>\n              <InputGroup>\n                <InputGroupTextarea placeholder=\"Describe your task in natural language.\"></InputGroupTextarea>\n                <InputGroupAddon align=\"block-end\">\n                  <Popover>\n                    <Tooltip>\n                      <PopoverTrigger\n                        render={\n                          <TooltipTrigger\n                            render={\n                              <InputGroupButton\n                                variant=\"outline\"\n                                size=\"icon-sm\"\n                              />\n                            }\n                          />\n                        }\n                      >\n                        <IconPlaceholder\n                          lucide=\"GitBranchIcon\"\n                          hugeicons=\"GitBranchIcon\"\n                          tabler=\"IconGitBranch\"\n                          phosphor=\"GitBranchIcon\"\n                          remixicon=\"RiGitBranchLine\"\n                        />\n                      </PopoverTrigger>\n                      <TooltipContent>Select a branch</TooltipContent>\n                    </Tooltip>\n                    <PopoverContent side=\"bottom\" align=\"start\" className=\"p-1\">\n                      <Field>\n                        <FieldLabel htmlFor=\"select-branch\" className=\"sr-only\">\n                          Select a Branch\n                        </FieldLabel>\n                        <Command>\n                          <CommandInput\n                            id=\"select-branch\"\n                            placeholder=\"Find a branch\"\n                          />\n                          <CommandEmpty>No branches found</CommandEmpty>\n                          <CommandList>\n                            <CommandGroup>\n                              {[\n                                \"main\",\n                                \"develop\",\n                                \"feature/123\",\n                                \"feature/user-authentication\",\n                                \"feature/dashboard-redesign\",\n                                \"bugfix/login-error\",\n                                \"hotfix/security-patch\",\n                                \"release/v2.0.0\",\n                                \"feature/api-integration\",\n                                \"bugfix/memory-leak\",\n                                \"feature/dark-mode\",\n                                \"feature/responsive-design\",\n                                \"bugfix/typo-fix\",\n                                \"feature/search-functionality\",\n                                \"release/v1.9.0\",\n                                \"feature/notifications\",\n                                \"bugfix/cache-issue\",\n                                \"feature/payment-gateway\",\n                                \"hotfix/critical-bug\",\n                                \"feature/admin-panel\",\n                                \"bugfix/validation-error\",\n                                \"feature/analytics\",\n                                \"release/v2.1.0\",\n                              ].map((branch) => (\n                                <CommandItem\n                                  key={branch}\n                                  value={branch}\n                                  onSelect={() => setSelectedBranch(branch)}\n                                  data-checked={selectedBranch === branch}\n                                >\n                                  {branch}\n                                </CommandItem>\n                              ))}\n                            </CommandGroup>\n                          </CommandList>\n                        </Command>\n                      </Field>\n                    </PopoverContent>\n                  </Popover>\n                  <Popover>\n                    <Tooltip>\n                      <PopoverTrigger\n                        render={\n                          <TooltipTrigger\n                            render={\n                              <InputGroupButton\n                                variant=\"outline\"\n                                size=\"icon-sm\"\n                              />\n                            }\n                          />\n                        }\n                      >\n                        <IconPlaceholder\n                          lucide=\"BotIcon\"\n                          hugeicons=\"RoboticIcon\"\n                          tabler=\"IconRobot\"\n                          phosphor=\"RobotIcon\"\n                          remixicon=\"RiRobotLine\"\n                        />\n                      </PopoverTrigger>\n                      <TooltipContent>Select Agent</TooltipContent>\n                    </Tooltip>\n                    <PopoverContent side=\"bottom\" align=\"start\">\n                      <Empty className=\"gap-4 p-0\">\n                        <EmptyHeader>\n                          <EmptyTitle className=\"text-sm\">\n                            This repository has no custom agents\n                          </EmptyTitle>\n                          <EmptyDescription className=\"text-xs\">\n                            Custom agents are reusable instructions and tools in\n                            your repository.\n                          </EmptyDescription>\n                        </EmptyHeader>\n                        <EmptyContent>\n                          <Button variant=\"outline\" size=\"sm\">\n                            Create Custom Agent\n                          </Button>\n                        </EmptyContent>\n                      </Empty>\n                    </PopoverContent>\n                  </Popover>\n                  <Tooltip>\n                    <TooltipTrigger\n                      render={\n                        <InputGroupButton\n                          variant=\"ghost\"\n                          size=\"icon-sm\"\n                          className=\"ml-auto\"\n                        />\n                      }\n                    >\n                      <IconPlaceholder\n                        lucide=\"SendIcon\"\n                        hugeicons=\"SentIcon\"\n                        tabler=\"IconSend\"\n                        phosphor=\"PaperPlaneTiltIcon\"\n                        remixicon=\"RiSendPlaneLine\"\n                      />\n                    </TooltipTrigger>\n                    <TooltipContent className=\"flex items-center gap-2 pr-2\">\n                      Start Task <Kbd>⏎</Kbd>\n                    </TooltipContent>\n                  </Tooltip>\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n          </PopoverContent>\n        </Popover>\n      </div>\n    </Example>\n  )\n}\nfunction Navbar() {\n  return (\n    <Example title=\"Account Menu\">\n      <header className=\"flex h-14 w-full items-center gap-2\">\n        <Drawer direction=\"left\">\n          <DrawerTrigger asChild>\n            <Button variant=\"outline\" size=\"icon\">\n              <IconPlaceholder\n                lucide=\"MenuIcon\"\n                hugeicons=\"Menu09Icon\"\n                tabler=\"IconMenu\"\n                phosphor=\"ListIcon\"\n                remixicon=\"RiListUnordered\"\n              />\n              <span className=\"sr-only\">Open menu</span>\n            </Button>\n          </DrawerTrigger>\n          <DrawerContent className=\"max-w-72\">\n            <DrawerHeader className=\"flex flex-row items-center justify-between px-5 pb-0\">\n              <DrawerTitle>Menu</DrawerTitle>\n              <DrawerClose asChild>\n                <Button variant=\"ghost\" size=\"icon-sm\" >\n                  <IconPlaceholder\n                    lucide=\"XIcon\"\n                    tabler=\"IconX\"\n                    hugeicons=\"Cancel01Icon\"\n                    phosphor=\"XIcon\"\n                    remixicon=\"RiCloseLine\"\n                  />\n                  <span className=\"sr-only\">Close</span>\n                </Button>\n              </DrawerClose>\n            </DrawerHeader>\n            <div className=\"p-2\">\n              <ItemGroup className=\"gap-px\">\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"HomeIcon\"\n                      tabler=\"IconHome\"\n                      hugeicons=\"HomeIcon\"\n                      phosphor=\"HouseIcon\"\n                      remixicon=\"RiHomeLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Home</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"CircleIcon\"\n                      tabler=\"IconCircle\"\n                      hugeicons=\"CircleIcon\"\n                      phosphor=\"CircleIcon\"\n                      remixicon=\"RiCircleLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Issues</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"GitBranchIcon\"\n                      tabler=\"IconGitBranch\"\n                      hugeicons=\"GitBranchIcon\"\n                      phosphor=\"GitBranchIcon\"\n                      remixicon=\"RiGitBranchLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Pull requests</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"LayoutGridIcon\"\n                      tabler=\"IconLayoutGrid\"\n                      hugeicons=\"GridIcon\"\n                      phosphor=\"GridFourIcon\"\n                      remixicon=\"RiGridLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Projects</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"MailIcon\"\n                      tabler=\"IconMail\"\n                      hugeicons=\"MailIcon\"\n                      phosphor=\"EnvelopeIcon\"\n                      remixicon=\"RiMailLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Discussions</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"ServerIcon\"\n                      tabler=\"IconServer\"\n                      hugeicons=\"ServerStackIcon\"\n                      phosphor=\"HardDrivesIcon\"\n                      remixicon=\"RiHardDriveLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Codespaces</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"BotIcon\"\n                      tabler=\"IconRobot\"\n                      hugeicons=\"RoboticIcon\"\n                      phosphor=\"RobotIcon\"\n                      remixicon=\"RiRobotLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Copilot</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"SparklesIcon\"\n                      tabler=\"IconSparkles\"\n                      hugeicons=\"SparklesIcon\"\n                      phosphor=\"SparkleIcon\"\n                      remixicon=\"RiSparklingLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Spark</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <ItemSeparator />\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"SearchIcon\"\n                      tabler=\"IconSearch\"\n                      hugeicons=\"SearchIcon\"\n                      phosphor=\"MagnifyingGlassIcon\"\n                      remixicon=\"RiSearchLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Explore</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"ShoppingBagIcon\"\n                      tabler=\"IconShoppingBag\"\n                      hugeicons=\"ShoppingBasket01Icon\"\n                      phosphor=\"BagIcon\"\n                      remixicon=\"RiShoppingBagLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Marketplace</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"LinkIcon\"\n                      tabler=\"IconLink\"\n                      hugeicons=\"LinkIcon\"\n                      phosphor=\"LinkIcon\"\n                      remixicon=\"RiLinksLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>MCP registry</ItemTitle>\n                  </ItemContent>\n                </Item>\n              </ItemGroup>\n            </div>\n          </DrawerContent>\n        </Drawer>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <Button\n                variant=\"ghost\"\n                size=\"icon\"\n                className=\"ml-auto rounded-full\"\n              />\n            }\n          >\n            <Avatar>\n              <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"shadcn\" />\n              <AvatarFallback>SC</AvatarFallback>\n            </Avatar>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-56\" align=\"end\">\n            <DropdownMenuGroup>\n              <DropdownMenuLabel className=\"p-0 font-normal\">\n                <Item className=\"px-2 py-1 pb-0.5\" size=\"sm\">\n                  <ItemMedia>\n                    <Avatar>\n                      <AvatarImage\n                        src=\"https://github.com/shadcn.png\"\n                        alt=\"shadcn\"\n                      />\n                      <AvatarFallback>SC</AvatarFallback>\n                    </Avatar>\n                  </ItemMedia>\n                  <ItemContent className=\"gap-0\">\n                    <ItemTitle className=\"text-foreground text-sm\">\n                      shadcn\n                    </ItemTitle>\n                    <ItemDescription className=\"text-xs\">\n                      shadcn@example.com\n                    </ItemDescription>\n                  </ItemContent>\n                </Item>\n              </DropdownMenuLabel>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SmileIcon\"\n                  tabler=\"IconMoodSmile\"\n                  hugeicons=\"SmileIcon\"\n                  phosphor=\"SmileyIcon\"\n                  remixicon=\"RiEmotionLine\"\n                />\n                Set status\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CircleAlertIcon\"\n                  tabler=\"IconExclamationCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                  phosphor=\"WarningCircleIcon\"\n                  remixicon=\"RiErrorWarningLine\"\n                />\n                Single sign-on\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"UserIcon\"\n                  tabler=\"IconUser\"\n                  hugeicons=\"UserIcon\"\n                  phosphor=\"UserIcon\"\n                  remixicon=\"RiUserLine\"\n                />\n                Profile\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"FolderIcon\"\n                  tabler=\"IconFolder\"\n                  hugeicons=\"FolderIcon\"\n                  phosphor=\"FolderIcon\"\n                  remixicon=\"RiFolderLine\"\n                />\n                Repositories\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"StarIcon\"\n                  tabler=\"IconStar\"\n                  hugeicons=\"StarIcon\"\n                  phosphor=\"StarIcon\"\n                  remixicon=\"RiStarLine\"\n                />\n                Stars\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CodeIcon\"\n                  tabler=\"IconCode\"\n                  hugeicons=\"CodeIcon\"\n                  phosphor=\"CodeIcon\"\n                  remixicon=\"RiCodeLine\"\n                />\n                Gists\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"FolderIcon\"\n                  tabler=\"IconFolder\"\n                  hugeicons=\"FolderIcon\"\n                  phosphor=\"FolderIcon\"\n                  remixicon=\"RiFolderLine\"\n                />\n                Organizations\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"ServerIcon\"\n                  tabler=\"IconServer\"\n                  hugeicons=\"ServerStackIcon\"\n                  phosphor=\"HardDrivesIcon\"\n                  remixicon=\"RiHardDriveLine\"\n                />\n                Enterprises\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"HeartIcon\"\n                  tabler=\"IconHeart\"\n                  hugeicons=\"FavouriteIcon\"\n                  phosphor=\"HeartIcon\"\n                  remixicon=\"RiHeartLine\"\n                />\n                Sponsors\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SettingsIcon\"\n                  tabler=\"IconSettings\"\n                  hugeicons=\"SettingsIcon\"\n                  phosphor=\"GearIcon\"\n                  remixicon=\"RiSettingsLine\"\n                />\n                Settings\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"BotIcon\"\n                  tabler=\"IconRobot\"\n                  hugeicons=\"RoboticIcon\"\n                  phosphor=\"RobotIcon\"\n                  remixicon=\"RiRobotLine\"\n                />\n                Copilot settings\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SparklesIcon\"\n                  tabler=\"IconSparkles\"\n                  hugeicons=\"SparklesIcon\"\n                  phosphor=\"SparkleIcon\"\n                  remixicon=\"RiSparklingLine\"\n                />\n                Feature preview\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"MonitorIcon\"\n                  tabler=\"IconDeviceDesktop\"\n                  hugeicons=\"ComputerIcon\"\n                  phosphor=\"MonitorIcon\"\n                  remixicon=\"RiComputerLine\"\n                />\n                Appearance\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"UserIcon\"\n                  tabler=\"IconUser\"\n                  hugeicons=\"UserIcon\"\n                  phosphor=\"UserIcon\"\n                  remixicon=\"RiUserLine\"\n                />\n                Accessibility\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUpIcon\"\n                  phosphor=\"ArrowUpIcon\"\n                  remixicon=\"RiArrowUpLine\"\n                />\n                Upgrade\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"LogOutIcon\"\n                  tabler=\"IconLogout\"\n                  hugeicons=\"LogoutIcon\"\n                  phosphor=\"SignOutIcon\"\n                  remixicon=\"RiLogoutBoxLine\"\n                />\n                Sign out\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </header>\n    </Example>\n  )\n}\nconst usernames = [\n  \"shadcn\",\n  \"vercel\",\n  \"nextjs\",\n  \"tailwindlabs\",\n  \"typescript-lang\",\n  \"eslint\",\n  \"prettier\",\n  \"babel\",\n  \"webpack\",\n  \"rollup\",\n  \"parcel\",\n  \"vite\",\n  \"react\",\n  \"vue\",\n  \"angular\",\n  \"solid\",\n]\nfunction Contributors() {\n  return (\n    <Example title=\"Contributors\" className=\"items-center lg:p-16\">\n      <Card className=\"max-w-sm\">\n        <CardHeader>\n          <CardTitle>\n            Contributors <Badge variant=\"secondary\">312</Badge>\n          </CardTitle>\n        </CardHeader>\n        <CardContent>\n          <div className=\"flex flex-wrap gap-2\">\n            {usernames.map((username) => (\n              <Avatar key={username}>\n                <AvatarImage\n                  src={`https://github.com/${username}.png`}\n                  alt={username}\n                />\n                <AvatarFallback>{username.charAt(0)}</AvatarFallback>\n              </Avatar>\n            ))}\n          </div>\n        </CardContent>\n        <CardFooter>\n          <a href=\"#\" className=\"text-sm underline underline-offset-4\">\n            + 810 contributors\n          </a>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\nfunction Profile() {\n  return (\n    <Example title=\"Profile\" className=\"items-center justify-center\">\n      <Card className=\"mx-auto w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>Profile</CardTitle>\n          <CardDescription>Manage your profile information.</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form id=\"profile\">\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"name\">Name</FieldLabel>\n                <Input id=\"name\" placeholder=\"shadcn\" />\n                <FieldDescription>\n                  Your name may appear around GitHub where you contribute or are\n                  mentioned. You can remove it at any time.\n                </FieldDescription>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"email\">Public Email</FieldLabel>\n                <NativeSelect id=\"email\">\n                  <NativeSelectOption value=\"m@shadcn.com\">\n                    m@shadcn.com\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"m@gmail.com\">\n                    m@gmail.com\n                  </NativeSelectOption>\n                </NativeSelect>\n                <FieldDescription>\n                  You can manage verified email addresses in your{\" \"}\n                  <a href=\"#email-settings\">email settings</a>.\n                </FieldDescription>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"bio\">Bio</FieldLabel>\n                <Textarea\n                  id=\"bio\"\n                  placeholder=\"Tell us a little bit about yourself\"\n                />\n                <FieldDescription>\n                  You can <span>@mention</span> other users and organizations to\n                  link to them.\n                </FieldDescription>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button form=\"profile\">Save Profile</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\nfunction ContributionsActivity() {\n  return (\n    <Example title=\"Contributions Activity\" className=\"justify-center\">\n      <Card className=\"mx-auto w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>Contributions & Activity</CardTitle>\n          <CardDescription>\n            Manage your contributions and activity visibility.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form id=\"contributions-activity\">\n            <FieldGroup>\n              <FieldSet>\n                <FieldLegend className=\"sr-only\">\n                  Contributions & activity\n                </FieldLegend>\n                <FieldGroup className=\"gap-3\">\n                  <Field orientation=\"horizontal\">\n                    <Checkbox id=\"private-profile\" />\n                    <FieldContent>\n                      <FieldLabel\n                        htmlFor=\"private-profile\"\n                        className=\"font-normal\"\n                      >\n                        Make profile private and hide activity\n                      </FieldLabel>\n                      <FieldDescription>\n                        Enabling this will hide your contributions and activity\n                        from your GitHub profile and from social features like\n                        followers, stars, feeds, leaderboards and releases.\n                      </FieldDescription>\n                    </FieldContent>\n                  </Field>\n                  <Field orientation=\"horizontal\">\n                    <Checkbox id=\"private-contributions\" defaultChecked />\n                    <FieldContent>\n                      <FieldLabel\n                        htmlFor=\"private-contributions\"\n                        className=\"font-normal\"\n                      >\n                        Include private contributions on my profile\n                      </FieldLabel>\n                      <FieldDescription>\n                        Your contribution graph, achievements, and activity\n                        overview will show your private contributions without\n                        revealing any repository or organization information.{\" \"}\n                        <a href=\"#read-more\">Read more</a>.\n                      </FieldDescription>\n                    </FieldContent>\n                  </Field>\n                </FieldGroup>\n              </FieldSet>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button form=\"contributions-activity\">Save Changes</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\nconst users = [\n  \"shadcn\",\n  \"maxleiter\",\n  \"evilrabbit\",\n  \"pranathip\",\n  \"jorgezreik\",\n  \"shuding\",\n  \"rauchg\",\n]\nfunction AssignIssue() {\n  const anchor = useComboboxAnchor()\n  return (\n    <Example title=\"User Select\" className=\"items-center justify-center\">\n      <Card className=\"w-full max-w-sm\" size=\"sm\">\n        <CardHeader className=\"border-b\">\n          <CardTitle className=\"text-sm\">Assign Issue</CardTitle>\n          <CardDescription className=\"text-sm\">\n            Select users to assign to this issue.\n          </CardDescription>\n          <CardAction>\n            <Tooltip>\n              <TooltipTrigger\n                render={<Button variant=\"outline\" size=\"icon-xs\" />}\n              >\n                <IconPlaceholder\n                  lucide=\"PlusIcon\"\n                  tabler=\"IconPlus\"\n                  hugeicons=\"PlusSignIcon\"\n                  phosphor=\"PlusIcon\"\n                  remixicon=\"RiAddLine\"\n                />\n              </TooltipTrigger>\n              <TooltipContent>Add user</TooltipContent>\n            </Tooltip>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <Combobox\n            multiple\n            autoHighlight\n            items={users}\n            defaultValue={[users[0]]}\n          >\n            <ComboboxChips ref={anchor}>\n              <ComboboxValue>\n                {(values) => (\n                  <React.Fragment>\n                    {values.map((username: string) => (\n                      <ComboboxChip key={username}>\n                        <Avatar className=\"size-4\">\n                          <AvatarImage\n                            src={`https://github.com/${username}.png`}\n                            alt={username}\n                          />\n                          <AvatarFallback>{username.charAt(0)}</AvatarFallback>\n                        </Avatar>\n                        {username}\n                      </ComboboxChip>\n                    ))}\n                    <ComboboxChipsInput\n                      placeholder={\n                        values.length > 0 ? undefined : \"Select a item...\"\n                      }\n                    />\n                  </React.Fragment>\n                )}\n              </ComboboxValue>\n            </ComboboxChips>\n            <ComboboxContent anchor={anchor}>\n              <ComboboxEmpty>No users found.</ComboboxEmpty>\n              <ComboboxList>\n                {(username) => (\n                  <ComboboxItem key={username} value={username}>\n                    <Avatar className=\"size-5\">\n                      <AvatarImage\n                        src={`https://github.com/${username}.png`}\n                        alt={username}\n                      />\n                      <AvatarFallback>{username.charAt(0)}</AvatarFallback>\n                    </Avatar>\n                    {username}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-lyra/components/example\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/base-lyra/ui/avatar\"\nimport { Badge } from \"@/registry/base-lyra/ui/badge\"\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-lyra/ui/card\"\nimport { Checkbox } from \"@/registry/base-lyra/ui/checkbox\"\nimport {\n  Combobox,\n  ComboboxChip,\n  ComboboxChips,\n  ComboboxChipsInput,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxItem,\n  ComboboxList,\n  ComboboxValue,\n  useComboboxAnchor,\n} from \"@/registry/base-lyra/ui/combobox\"\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"@/registry/base-lyra/ui/command\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/base-lyra/ui/drawer\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-lyra/ui/dropdown-menu\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/base-lyra/ui/empty\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n} from \"@/registry/base-lyra/ui/field\"\nimport { Input } from \"@/registry/base-lyra/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupTextarea,\n} from \"@/registry/base-lyra/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemGroup,\n  ItemMedia,\n  ItemSeparator,\n  ItemTitle,\n} from \"@/registry/base-lyra/ui/item\"\nimport { Kbd } from \"@/registry/base-lyra/ui/kbd\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/base-lyra/ui/native-select\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/base-lyra/ui/popover\"\nimport { Separator } from \"@/registry/base-lyra/ui/separator\"\nimport { Spinner } from \"@/registry/base-lyra/ui/spinner\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/base-lyra/ui/tabs\"\nimport { Textarea } from \"@/registry/base-lyra/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/base-lyra/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function GithubBlock() {\n  return (\n    <ExampleWrapper>\n      <CodespacesCard />\n      <AssignIssue />\n      <Navbar />\n      <RepositoryToolbar />\n      <Profile />\n      <ContributionsActivity />\n      <Contributors />\n    </ExampleWrapper>\n  )\n}\nfunction CodespacesCard() {\n  const [isCreatingCodespace, setIsCreatingCodespace] = React.useState(false)\n  return (\n    <Example title=\"Codespaces\" className=\"min-h-[550px] lg:p-12\">\n      <Card className=\"mx-auto w-full max-w-sm\" size=\"sm\">\n        <CardContent>\n          <Tabs defaultValue=\"codespaces\">\n            <TabsList className=\"w-full\">\n              <TabsTrigger value=\"codespaces\">Codespaces</TabsTrigger>\n              <TabsTrigger value=\"local\">Local</TabsTrigger>\n            </TabsList>\n            <TabsContent value=\"codespaces\">\n              <Item size=\"sm\" className=\"px-1 pt-2\">\n                <ItemContent>\n                  <ItemTitle>Codespaces</ItemTitle>\n                  <ItemDescription>\n                    Your workspaces in the cloud\n                  </ItemDescription>\n                </ItemContent>\n                <ItemActions>\n                  <Tooltip>\n                    <TooltipTrigger\n                      render={<Button variant=\"ghost\" size=\"icon-sm\" />}\n                    >\n                      <IconPlaceholder\n                        lucide=\"PlusIcon\"\n                        tabler=\"IconPlus\"\n                        hugeicons=\"PlusSignIcon\"\n                        phosphor=\"PlusIcon\"\n                        remixicon=\"RiAddLine\"\n                      />\n                    </TooltipTrigger>\n                    <TooltipContent side=\"bottom\">\n                      Create a codespace on main\n                    </TooltipContent>\n                  </Tooltip>\n                  <DropdownMenu>\n                    <Tooltip>\n                      <TooltipTrigger\n                        render={\n                          <DropdownMenuTrigger\n                            render={<Button variant=\"ghost\" size=\"icon-sm\" />}\n                          />\n                        }\n                      >\n                        <IconPlaceholder\n                          lucide=\"MoreHorizontalIcon\"\n                          tabler=\"IconDots\"\n                          hugeicons=\"MoreHorizontalCircle01Icon\"\n                          phosphor=\"DotsThreeOutlineIcon\"\n                          remixicon=\"RiMoreLine\"\n                        />\n                      </TooltipTrigger>\n                      <TooltipContent side=\"bottom\">\n                        Codespace repository configuration\n                      </TooltipContent>\n                    </Tooltip>\n                    <DropdownMenuContent align=\"end\" className=\"w-56\">\n                      <DropdownMenuGroup>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"PlusIcon\"\n                            tabler=\"IconPlus\"\n                            hugeicons=\"PlusSignIcon\"\n                            phosphor=\"PlusIcon\"\n                            remixicon=\"RiAddLine\"\n                          />\n                          New with options...\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"ContainerIcon\"\n                            tabler=\"IconBox\"\n                            hugeicons=\"CubeIcon\"\n                            phosphor=\"CubeIcon\"\n                            remixicon=\"RiBox1Line\"\n                          />\n                          Configure dev container\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"ZapIcon\"\n                            tabler=\"IconBolt\"\n                            hugeicons=\"ZapIcon\"\n                            phosphor=\"LightningIcon\"\n                            remixicon=\"RiFlashlightLine\"\n                          />\n                          Set up prebuilds\n                        </DropdownMenuItem>\n                      </DropdownMenuGroup>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuGroup>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"ServerIcon\"\n                            tabler=\"IconServer\"\n                            hugeicons=\"ServerStackIcon\"\n                            phosphor=\"HardDrivesIcon\"\n                            remixicon=\"RiHardDriveLine\"\n                          />\n                          Manage codespaces\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"ShareIcon\"\n                            tabler=\"IconShare2\"\n                            hugeicons=\"Share03Icon\"\n                            phosphor=\"ShareIcon\"\n                            remixicon=\"RiShareLine\"\n                          />\n                          Share deep link\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"InfoIcon\"\n                            tabler=\"IconInfoCircle\"\n                            hugeicons=\"AlertCircleIcon\"\n                            phosphor=\"InfoIcon\"\n                            remixicon=\"RiInformationLine\"\n                          />\n                          What are codespaces?\n                        </DropdownMenuItem>\n                      </DropdownMenuGroup>\n                    </DropdownMenuContent>\n                  </DropdownMenu>\n                </ItemActions>\n              </Item>\n              <Separator className=\"-mx-2 my-2 w-auto!\" />\n              <Empty className=\"p-4\">\n                <EmptyHeader>\n                  <EmptyMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"ServerIcon\"\n                      tabler=\"IconServer\"\n                      hugeicons=\"ServerStackIcon\"\n                      phosphor=\"HardDrivesIcon\"\n                      remixicon=\"RiHardDriveLine\"\n                    />\n                  </EmptyMedia>\n                  <EmptyTitle>No codespaces</EmptyTitle>\n                  <EmptyDescription>\n                    You don&apos;t have any codespaces with this repository\n                    checked out\n                  </EmptyDescription>\n                </EmptyHeader>\n                <EmptyContent>\n                  <Button\n                    size=\"sm\"\n                    onClick={() => {\n                      setIsCreatingCodespace(true)\n                      setTimeout(() => {\n                        setIsCreatingCodespace(false)\n                      }, 2000)\n                    }}\n                    disabled={isCreatingCodespace}\n                  >\n                    {isCreatingCodespace ? (\n                      <Spinner data-icon=\"inline-start\" />\n                    ) : (\n                      \"\"\n                    )}\n                    Create Codespace\n                  </Button>\n                  <a\n                    href=\"#learn-more\"\n                    className=\"text-muted-foreground text-xs underline underline-offset-4\"\n                  >\n                    Learn more about codespaces\n                  </a>\n                </EmptyContent>\n              </Empty>\n              <Separator className=\"-mx-2 my-2 w-auto!\" />\n              <div className=\"text-muted-foreground p-1.5 text-xs\">\n                Codespace usage for this repository is paid for by{\" \"}\n                <span className=\"font-medium\">shadcn</span>.\n              </div>\n            </TabsContent>\n            <TabsContent value=\"local\">\n              <Item size=\"sm\" className=\"hidden p-0\">\n                <ItemContent>\n                  <ItemTitle className=\"gap-2\">\n                    <IconPlaceholder\n                      lucide=\"TerminalIcon\"\n                      tabler=\"IconTerminal\"\n                      hugeicons=\"ComputerTerminal01Icon\"\n                      phosphor=\"TerminalIcon\"\n                      remixicon=\"RiTerminalBoxLine\"\n                      className=\"size-4\"\n                    />\n                    Clone\n                  </ItemTitle>\n                </ItemContent>\n                <ItemActions>\n                  <Tooltip>\n                    <TooltipTrigger\n                      render={<Button variant=\"ghost\" size=\"icon\" />}\n                    >\n                      <IconPlaceholder\n                        lucide=\"InfoIcon\"\n                        tabler=\"IconInfoCircle\"\n                        hugeicons=\"AlertCircleIcon\"\n                        phosphor=\"InfoIcon\"\n                        remixicon=\"RiInformationLine\"\n                      />\n                    </TooltipTrigger>\n                    <TooltipContent side=\"left\">\n                      Which remote URL should I use?\n                    </TooltipContent>\n                  </Tooltip>\n                </ItemActions>\n              </Item>\n              <Tabs defaultValue=\"https\">\n                <TabsList\n                  variant=\"line\"\n                  className=\"w-full justify-start border-b *:[button]:flex-0\"\n                >\n                  <TabsTrigger value=\"https\">HTTPS</TabsTrigger>\n                  <TabsTrigger value=\"ssh\">SSH</TabsTrigger>\n                  <TabsTrigger value=\"cli\">GitHub CLI</TabsTrigger>\n                </TabsList>\n                <div className=\"bg-muted/30 rounded-md border p-2\">\n                  <TabsContent value=\"https\">\n                    <Field className=\"gap-2\">\n                      <FieldLabel htmlFor=\"https-url\" className=\"sr-only\">\n                        HTTPS URL\n                      </FieldLabel>\n                      <InputGroup>\n                        <InputGroupAddon align=\"inline-end\">\n                          <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                              phosphor=\"CopyIcon\"\n                              remixicon=\"RiFileCopyLine\"\n                            />\n                          </InputGroupButton>\n                        </InputGroupAddon>\n                        <InputGroupInput\n                          id=\"https-url\"\n                          defaultValue=\"https://github.com/shadcn-ui/ui.git\"\n                          readOnly\n                        />\n                      </InputGroup>\n                      <FieldDescription>\n                        Clone using the web URL.\n                      </FieldDescription>\n                    </Field>\n                  </TabsContent>\n                  <TabsContent value=\"ssh\">\n                    <Field className=\"gap-2\">\n                      <FieldLabel htmlFor=\"ssh-url\" className=\"sr-only\">\n                        SSH URL\n                      </FieldLabel>\n                      <InputGroup>\n                        <InputGroupAddon align=\"inline-end\">\n                          <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                              phosphor=\"CopyIcon\"\n                              remixicon=\"RiFileCopyLine\"\n                            />\n                          </InputGroupButton>\n                        </InputGroupAddon>\n                        <InputGroupInput\n                          id=\"ssh-url\"\n                          defaultValue=\"git@github.com:shadcn-ui/ui.git\"\n                          readOnly\n                        />\n                      </InputGroup>\n                      <FieldDescription>\n                        Use a password-protected SSH key.\n                      </FieldDescription>\n                    </Field>\n                  </TabsContent>\n                  <TabsContent value=\"cli\">\n                    <Field className=\"gap-2\">\n                      <FieldLabel htmlFor=\"cli-command\" className=\"sr-only\">\n                        CLI Command\n                      </FieldLabel>\n                      <InputGroup>\n                        <InputGroupAddon align=\"inline-end\">\n                          <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                              phosphor=\"CopyIcon\"\n                              remixicon=\"RiFileCopyLine\"\n                            />\n                          </InputGroupButton>\n                        </InputGroupAddon>\n                        <InputGroupInput\n                          id=\"cli-command\"\n                          defaultValue=\"gh repo clone shadcn-ui/ui\"\n                          readOnly\n                        />\n                      </InputGroup>\n                      <FieldDescription>\n                        Work fast with our official CLI.{\" \"}\n                        <a href=\"#learn-more\">Learn more</a>\n                      </FieldDescription>\n                    </Field>\n                  </TabsContent>\n                </div>\n              </Tabs>\n              <Separator className=\"-mx-2 my-2 w-auto!\" />\n              <div className=\"flex flex-col\">\n                <Button\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  className=\"justify-start gap-1.5\"\n                >\n                  <IconPlaceholder\n                    lucide=\"MonitorIcon\"\n                    tabler=\"IconDeviceDesktop\"\n                    hugeicons=\"ComputerIcon\"\n                    phosphor=\"MonitorIcon\"\n                    remixicon=\"RiComputerLine\"\n                    data-icon=\"inline-start\"\n                  />\n                  Open with GitHub Desktop\n                </Button>\n                <Button\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  className=\"justify-start gap-1.5\"\n                >\n                  <IconPlaceholder\n                    lucide=\"DownloadIcon\"\n                    tabler=\"IconDownload\"\n                    hugeicons=\"DownloadIcon\"\n                    phosphor=\"DownloadIcon\"\n                    remixicon=\"RiDownloadLine\"\n                    data-icon=\"inline-start\"\n                  />\n                  Download ZIP\n                </Button>\n              </div>\n            </TabsContent>\n          </Tabs>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\nfunction RepositoryToolbar() {\n  const [selectedBranch, setSelectedBranch] = React.useState(\"main\")\n  return (\n    <Example title=\"Repository Toolbar\">\n      <div className=\"flex items-center gap-2\">\n        <InputGroup>\n          <InputGroupInput placeholder=\"Go to file\" />\n          <InputGroupAddon align=\"inline-start\">\n            <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n              <IconPlaceholder\n                lucide=\"SearchIcon\"\n                tabler=\"IconSearch\"\n                hugeicons=\"SearchIcon\"\n                phosphor=\"MagnifyingGlassIcon\"\n                remixicon=\"RiSearchLine\"\n              />\n            </InputGroupButton>\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">\n            <Kbd>t</Kbd>\n          </InputGroupAddon>\n        </InputGroup>\n        <DropdownMenu>\n          <DropdownMenuTrigger render={<Button variant=\"outline\" />}>\n            Add File\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDown01Icon\"\n              phosphor=\"CaretDownIcon\"\n              remixicon=\"RiArrowDownSLine\"\n              data-icon=\"inline-end\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"PlusIcon\"\n                  tabler=\"IconPlus\"\n                  hugeicons=\"PlusSignIcon\"\n                  phosphor=\"PlusIcon\"\n                  remixicon=\"RiAddLine\"\n                />\n                Create new file\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"UploadIcon\"\n                  hugeicons=\"Upload01Icon\"\n                  tabler=\"IconUpload\"\n                  phosphor=\"UploadIcon\"\n                  remixicon=\"RiUploadLine\"\n                />\n                Upload files\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <Popover>\n          <Tooltip>\n            <TooltipTrigger\n              render={\n                <PopoverTrigger\n                  render={<Button variant=\"outline\" size=\"icon\" />}\n                />\n              }\n            >\n              <IconPlaceholder\n                lucide=\"CloudCogIcon\"\n                hugeicons=\"AiCloud01Icon\"\n                tabler=\"IconCloudCog\"\n                phosphor=\"CloudArrowUpIcon\"\n                remixicon=\"RiUploadCloudLine\"\n              />\n            </TooltipTrigger>\n            <TooltipContent>New Agent Task</TooltipContent>\n          </Tooltip>\n          <PopoverContent side=\"bottom\" align=\"end\" className=\"w-96\">\n            <Field>\n              <FieldLabel htmlFor=\"new-agent-task\">New Agent Task</FieldLabel>\n              <InputGroup>\n                <InputGroupTextarea placeholder=\"Describe your task in natural language.\"></InputGroupTextarea>\n                <InputGroupAddon align=\"block-end\">\n                  <Popover>\n                    <Tooltip>\n                      <PopoverTrigger\n                        render={\n                          <TooltipTrigger\n                            render={\n                              <InputGroupButton\n                                variant=\"outline\"\n                                size=\"icon-sm\"\n                              />\n                            }\n                          />\n                        }\n                      >\n                        <IconPlaceholder\n                          lucide=\"GitBranchIcon\"\n                          hugeicons=\"GitBranchIcon\"\n                          tabler=\"IconGitBranch\"\n                          phosphor=\"GitBranchIcon\"\n                          remixicon=\"RiGitBranchLine\"\n                        />\n                      </PopoverTrigger>\n                      <TooltipContent>Select a branch</TooltipContent>\n                    </Tooltip>\n                    <PopoverContent side=\"bottom\" align=\"start\" className=\"p-1\">\n                      <Field>\n                        <FieldLabel htmlFor=\"select-branch\" className=\"sr-only\">\n                          Select a Branch\n                        </FieldLabel>\n                        <Command>\n                          <CommandInput\n                            id=\"select-branch\"\n                            placeholder=\"Find a branch\"\n                          />\n                          <CommandEmpty>No branches found</CommandEmpty>\n                          <CommandList>\n                            <CommandGroup>\n                              {[\n                                \"main\",\n                                \"develop\",\n                                \"feature/123\",\n                                \"feature/user-authentication\",\n                                \"feature/dashboard-redesign\",\n                                \"bugfix/login-error\",\n                                \"hotfix/security-patch\",\n                                \"release/v2.0.0\",\n                                \"feature/api-integration\",\n                                \"bugfix/memory-leak\",\n                                \"feature/dark-mode\",\n                                \"feature/responsive-design\",\n                                \"bugfix/typo-fix\",\n                                \"feature/search-functionality\",\n                                \"release/v1.9.0\",\n                                \"feature/notifications\",\n                                \"bugfix/cache-issue\",\n                                \"feature/payment-gateway\",\n                                \"hotfix/critical-bug\",\n                                \"feature/admin-panel\",\n                                \"bugfix/validation-error\",\n                                \"feature/analytics\",\n                                \"release/v2.1.0\",\n                              ].map((branch) => (\n                                <CommandItem\n                                  key={branch}\n                                  value={branch}\n                                  onSelect={() => setSelectedBranch(branch)}\n                                  data-checked={selectedBranch === branch}\n                                >\n                                  {branch}\n                                </CommandItem>\n                              ))}\n                            </CommandGroup>\n                          </CommandList>\n                        </Command>\n                      </Field>\n                    </PopoverContent>\n                  </Popover>\n                  <Popover>\n                    <Tooltip>\n                      <PopoverTrigger\n                        render={\n                          <TooltipTrigger\n                            render={\n                              <InputGroupButton\n                                variant=\"outline\"\n                                size=\"icon-sm\"\n                              />\n                            }\n                          />\n                        }\n                      >\n                        <IconPlaceholder\n                          lucide=\"BotIcon\"\n                          hugeicons=\"RoboticIcon\"\n                          tabler=\"IconRobot\"\n                          phosphor=\"RobotIcon\"\n                          remixicon=\"RiRobotLine\"\n                        />\n                      </PopoverTrigger>\n                      <TooltipContent>Select Agent</TooltipContent>\n                    </Tooltip>\n                    <PopoverContent side=\"bottom\" align=\"start\">\n                      <Empty className=\"gap-4 p-0\">\n                        <EmptyHeader>\n                          <EmptyTitle className=\"text-sm\">\n                            This repository has no custom agents\n                          </EmptyTitle>\n                          <EmptyDescription className=\"text-xs\">\n                            Custom agents are reusable instructions and tools in\n                            your repository.\n                          </EmptyDescription>\n                        </EmptyHeader>\n                        <EmptyContent>\n                          <Button variant=\"outline\" size=\"sm\">\n                            Create Custom Agent\n                          </Button>\n                        </EmptyContent>\n                      </Empty>\n                    </PopoverContent>\n                  </Popover>\n                  <Tooltip>\n                    <TooltipTrigger\n                      render={\n                        <InputGroupButton\n                          variant=\"ghost\"\n                          size=\"icon-sm\"\n                          className=\"ml-auto\"\n                        />\n                      }\n                    >\n                      <IconPlaceholder\n                        lucide=\"SendIcon\"\n                        hugeicons=\"SentIcon\"\n                        tabler=\"IconSend\"\n                        phosphor=\"PaperPlaneTiltIcon\"\n                        remixicon=\"RiSendPlaneLine\"\n                      />\n                    </TooltipTrigger>\n                    <TooltipContent className=\"flex items-center gap-2 pr-2\">\n                      Start Task <Kbd>⏎</Kbd>\n                    </TooltipContent>\n                  </Tooltip>\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n          </PopoverContent>\n        </Popover>\n      </div>\n    </Example>\n  )\n}\nfunction Navbar() {\n  return (\n    <Example title=\"Account Menu\">\n      <header className=\"flex h-14 w-full items-center gap-2\">\n        <Drawer direction=\"left\">\n          <DrawerTrigger asChild>\n            <Button variant=\"outline\" size=\"icon\">\n              <IconPlaceholder\n                lucide=\"MenuIcon\"\n                hugeicons=\"Menu09Icon\"\n                tabler=\"IconMenu\"\n                phosphor=\"ListIcon\"\n                remixicon=\"RiListUnordered\"\n              />\n              <span className=\"sr-only\">Open menu</span>\n            </Button>\n          </DrawerTrigger>\n          <DrawerContent className=\"max-w-72\">\n            <DrawerHeader className=\"flex flex-row items-center justify-between px-5 pb-0\">\n              <DrawerTitle>Menu</DrawerTitle>\n              <DrawerClose asChild>\n                <Button variant=\"ghost\" size=\"icon-sm\">\n                  <IconPlaceholder\n                    lucide=\"XIcon\"\n                    tabler=\"IconX\"\n                    hugeicons=\"Cancel01Icon\"\n                    phosphor=\"XIcon\"\n                    remixicon=\"RiCloseLine\"\n                  />\n                  <span className=\"sr-only\">Close</span>\n                </Button>\n              </DrawerClose>\n            </DrawerHeader>\n            <div className=\"p-2\">\n              <ItemGroup className=\"gap-px\">\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"HomeIcon\"\n                      tabler=\"IconHome\"\n                      hugeicons=\"HomeIcon\"\n                      phosphor=\"HouseIcon\"\n                      remixicon=\"RiHomeLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Home</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"CircleIcon\"\n                      tabler=\"IconCircle\"\n                      hugeicons=\"CircleIcon\"\n                      phosphor=\"CircleIcon\"\n                      remixicon=\"RiCircleLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Issues</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"GitBranchIcon\"\n                      tabler=\"IconGitBranch\"\n                      hugeicons=\"GitBranchIcon\"\n                      phosphor=\"GitBranchIcon\"\n                      remixicon=\"RiGitBranchLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Pull requests</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"LayoutGridIcon\"\n                      tabler=\"IconLayoutGrid\"\n                      hugeicons=\"GridIcon\"\n                      phosphor=\"GridFourIcon\"\n                      remixicon=\"RiGridLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Projects</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"MailIcon\"\n                      tabler=\"IconMail\"\n                      hugeicons=\"MailIcon\"\n                      phosphor=\"EnvelopeIcon\"\n                      remixicon=\"RiMailLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Discussions</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"ServerIcon\"\n                      tabler=\"IconServer\"\n                      hugeicons=\"ServerStackIcon\"\n                      phosphor=\"HardDrivesIcon\"\n                      remixicon=\"RiHardDriveLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Codespaces</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"BotIcon\"\n                      tabler=\"IconRobot\"\n                      hugeicons=\"RoboticIcon\"\n                      phosphor=\"RobotIcon\"\n                      remixicon=\"RiRobotLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Copilot</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"SparklesIcon\"\n                      tabler=\"IconSparkles\"\n                      hugeicons=\"SparklesIcon\"\n                      phosphor=\"SparkleIcon\"\n                      remixicon=\"RiSparklingLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Spark</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <ItemSeparator />\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"SearchIcon\"\n                      tabler=\"IconSearch\"\n                      hugeicons=\"SearchIcon\"\n                      phosphor=\"MagnifyingGlassIcon\"\n                      remixicon=\"RiSearchLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Explore</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"ShoppingBagIcon\"\n                      tabler=\"IconShoppingBag\"\n                      hugeicons=\"ShoppingBasket01Icon\"\n                      phosphor=\"BagIcon\"\n                      remixicon=\"RiShoppingBagLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Marketplace</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"LinkIcon\"\n                      tabler=\"IconLink\"\n                      hugeicons=\"LinkIcon\"\n                      phosphor=\"LinkIcon\"\n                      remixicon=\"RiLinksLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>MCP registry</ItemTitle>\n                  </ItemContent>\n                </Item>\n              </ItemGroup>\n            </div>\n          </DrawerContent>\n        </Drawer>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <Button\n                variant=\"ghost\"\n                size=\"icon\"\n                className=\"ml-auto rounded-full\"\n              />\n            }\n          >\n            <Avatar>\n              <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"shadcn\" />\n              <AvatarFallback>SC</AvatarFallback>\n            </Avatar>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-56\" align=\"end\">\n            <DropdownMenuGroup>\n              <DropdownMenuLabel className=\"p-0 font-normal\">\n                <Item className=\"px-2 py-1 pb-0.5\" size=\"sm\">\n                  <ItemMedia>\n                    <Avatar>\n                      <AvatarImage\n                        src=\"https://github.com/shadcn.png\"\n                        alt=\"shadcn\"\n                      />\n                      <AvatarFallback>SC</AvatarFallback>\n                    </Avatar>\n                  </ItemMedia>\n                  <ItemContent className=\"gap-0\">\n                    <ItemTitle className=\"text-foreground text-sm\">\n                      shadcn\n                    </ItemTitle>\n                    <ItemDescription className=\"text-xs\">\n                      shadcn@example.com\n                    </ItemDescription>\n                  </ItemContent>\n                </Item>\n              </DropdownMenuLabel>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SmileIcon\"\n                  tabler=\"IconMoodSmile\"\n                  hugeicons=\"SmileIcon\"\n                  phosphor=\"SmileyIcon\"\n                  remixicon=\"RiEmotionLine\"\n                />\n                Set status\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CircleAlertIcon\"\n                  tabler=\"IconExclamationCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                  phosphor=\"WarningCircleIcon\"\n                  remixicon=\"RiErrorWarningLine\"\n                />\n                Single sign-on\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"UserIcon\"\n                  tabler=\"IconUser\"\n                  hugeicons=\"UserIcon\"\n                  phosphor=\"UserIcon\"\n                  remixicon=\"RiUserLine\"\n                />\n                Profile\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"FolderIcon\"\n                  tabler=\"IconFolder\"\n                  hugeicons=\"FolderIcon\"\n                  phosphor=\"FolderIcon\"\n                  remixicon=\"RiFolderLine\"\n                />\n                Repositories\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"StarIcon\"\n                  tabler=\"IconStar\"\n                  hugeicons=\"StarIcon\"\n                  phosphor=\"StarIcon\"\n                  remixicon=\"RiStarLine\"\n                />\n                Stars\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CodeIcon\"\n                  tabler=\"IconCode\"\n                  hugeicons=\"CodeIcon\"\n                  phosphor=\"CodeIcon\"\n                  remixicon=\"RiCodeLine\"\n                />\n                Gists\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"FolderIcon\"\n                  tabler=\"IconFolder\"\n                  hugeicons=\"FolderIcon\"\n                  phosphor=\"FolderIcon\"\n                  remixicon=\"RiFolderLine\"\n                />\n                Organizations\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"ServerIcon\"\n                  tabler=\"IconServer\"\n                  hugeicons=\"ServerStackIcon\"\n                  phosphor=\"HardDrivesIcon\"\n                  remixicon=\"RiHardDriveLine\"\n                />\n                Enterprises\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"HeartIcon\"\n                  tabler=\"IconHeart\"\n                  hugeicons=\"FavouriteIcon\"\n                  phosphor=\"HeartIcon\"\n                  remixicon=\"RiHeartLine\"\n                />\n                Sponsors\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SettingsIcon\"\n                  tabler=\"IconSettings\"\n                  hugeicons=\"SettingsIcon\"\n                  phosphor=\"GearIcon\"\n                  remixicon=\"RiSettingsLine\"\n                />\n                Settings\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"BotIcon\"\n                  tabler=\"IconRobot\"\n                  hugeicons=\"RoboticIcon\"\n                  phosphor=\"RobotIcon\"\n                  remixicon=\"RiRobotLine\"\n                />\n                Copilot settings\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SparklesIcon\"\n                  tabler=\"IconSparkles\"\n                  hugeicons=\"SparklesIcon\"\n                  phosphor=\"SparkleIcon\"\n                  remixicon=\"RiSparklingLine\"\n                />\n                Feature preview\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"MonitorIcon\"\n                  tabler=\"IconDeviceDesktop\"\n                  hugeicons=\"ComputerIcon\"\n                  phosphor=\"MonitorIcon\"\n                  remixicon=\"RiComputerLine\"\n                />\n                Appearance\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"UserIcon\"\n                  tabler=\"IconUser\"\n                  hugeicons=\"UserIcon\"\n                  phosphor=\"UserIcon\"\n                  remixicon=\"RiUserLine\"\n                />\n                Accessibility\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUpIcon\"\n                  phosphor=\"ArrowUpIcon\"\n                  remixicon=\"RiArrowUpLine\"\n                />\n                Upgrade\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"LogOutIcon\"\n                  tabler=\"IconLogout\"\n                  hugeicons=\"LogoutIcon\"\n                  phosphor=\"SignOutIcon\"\n                  remixicon=\"RiLogoutBoxLine\"\n                />\n                Sign out\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </header>\n    </Example>\n  )\n}\nconst usernames = [\n  \"shadcn\",\n  \"vercel\",\n  \"nextjs\",\n  \"tailwindlabs\",\n  \"typescript-lang\",\n  \"eslint\",\n  \"prettier\",\n  \"babel\",\n  \"webpack\",\n  \"rollup\",\n  \"parcel\",\n  \"vite\",\n  \"react\",\n  \"vue\",\n  \"angular\",\n  \"solid\",\n]\nfunction Contributors() {\n  return (\n    <Example title=\"Contributors\" className=\"items-center lg:p-16\">\n      <Card className=\"max-w-sm\">\n        <CardHeader>\n          <CardTitle>\n            Contributors <Badge variant=\"secondary\">312</Badge>\n          </CardTitle>\n        </CardHeader>\n        <CardContent>\n          <div className=\"flex flex-wrap gap-2\">\n            {usernames.map((username) => (\n              <Avatar key={username}>\n                <AvatarImage\n                  src={`https://github.com/${username}.png`}\n                  alt={username}\n                />\n                <AvatarFallback>{username.charAt(0)}</AvatarFallback>\n              </Avatar>\n            ))}\n          </div>\n        </CardContent>\n        <CardFooter>\n          <a href=\"#\" className=\"text-sm underline underline-offset-4\">\n            + 810 contributors\n          </a>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\nfunction Profile() {\n  return (\n    <Example title=\"Profile\" className=\"items-center justify-center\">\n      <Card className=\"mx-auto w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>Profile</CardTitle>\n          <CardDescription>Manage your profile information.</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form id=\"profile\">\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"name\">Name</FieldLabel>\n                <Input id=\"name\" placeholder=\"shadcn\" />\n                <FieldDescription>\n                  Your name may appear around GitHub where you contribute or are\n                  mentioned. You can remove it at any time.\n                </FieldDescription>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"email\">Public Email</FieldLabel>\n                <NativeSelect id=\"email\">\n                  <NativeSelectOption value=\"m@shadcn.com\">\n                    m@shadcn.com\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"m@gmail.com\">\n                    m@gmail.com\n                  </NativeSelectOption>\n                </NativeSelect>\n                <FieldDescription>\n                  You can manage verified email addresses in your{\" \"}\n                  <a href=\"#email-settings\">email settings</a>.\n                </FieldDescription>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"bio\">Bio</FieldLabel>\n                <Textarea\n                  id=\"bio\"\n                  placeholder=\"Tell us a little bit about yourself\"\n                />\n                <FieldDescription>\n                  You can <span>@mention</span> other users and organizations to\n                  link to them.\n                </FieldDescription>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button form=\"profile\">Save Profile</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\nfunction ContributionsActivity() {\n  return (\n    <Example title=\"Contributions Activity\" className=\"justify-center\">\n      <Card className=\"mx-auto w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>Contributions & Activity</CardTitle>\n          <CardDescription>\n            Manage your contributions and activity visibility.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form id=\"contributions-activity\">\n            <FieldGroup>\n              <FieldSet>\n                <FieldLegend className=\"sr-only\">\n                  Contributions & activity\n                </FieldLegend>\n                <FieldGroup className=\"gap-3\">\n                  <Field orientation=\"horizontal\">\n                    <Checkbox id=\"private-profile\" />\n                    <FieldContent>\n                      <FieldLabel\n                        htmlFor=\"private-profile\"\n                        className=\"font-normal\"\n                      >\n                        Make profile private and hide activity\n                      </FieldLabel>\n                      <FieldDescription>\n                        Enabling this will hide your contributions and activity\n                        from your GitHub profile and from social features like\n                        followers, stars, feeds, leaderboards and releases.\n                      </FieldDescription>\n                    </FieldContent>\n                  </Field>\n                  <Field orientation=\"horizontal\">\n                    <Checkbox id=\"private-contributions\" defaultChecked />\n                    <FieldContent>\n                      <FieldLabel\n                        htmlFor=\"private-contributions\"\n                        className=\"font-normal\"\n                      >\n                        Include private contributions on my profile\n                      </FieldLabel>\n                      <FieldDescription>\n                        Your contribution graph, achievements, and activity\n                        overview will show your private contributions without\n                        revealing any repository or organization information.{\" \"}\n                        <a href=\"#read-more\">Read more</a>.\n                      </FieldDescription>\n                    </FieldContent>\n                  </Field>\n                </FieldGroup>\n              </FieldSet>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button form=\"contributions-activity\">Save Changes</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\nconst users = [\n  \"shadcn\",\n  \"maxleiter\",\n  \"evilrabbit\",\n  \"pranathip\",\n  \"jorgezreik\",\n  \"shuding\",\n  \"rauchg\",\n]\nfunction AssignIssue() {\n  const anchor = useComboboxAnchor()\n  return (\n    <Example title=\"User Select\" className=\"items-center justify-center\">\n      <Card className=\"w-full max-w-sm\" size=\"sm\">\n        <CardHeader className=\"border-b\">\n          <CardTitle className=\"text-sm\">Assign Issue</CardTitle>\n          <CardDescription className=\"text-sm\">\n            Select users to assign to this issue.\n          </CardDescription>\n          <CardAction>\n            <Tooltip>\n              <TooltipTrigger\n                render={<Button variant=\"outline\" size=\"icon-xs\" />}\n              >\n                <IconPlaceholder\n                  lucide=\"PlusIcon\"\n                  tabler=\"IconPlus\"\n                  hugeicons=\"PlusSignIcon\"\n                  phosphor=\"PlusIcon\"\n                  remixicon=\"RiAddLine\"\n                />\n              </TooltipTrigger>\n              <TooltipContent>Add user</TooltipContent>\n            </Tooltip>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <Combobox\n            multiple\n            autoHighlight\n            items={users}\n            defaultValue={[users[0]]}\n          >\n            <ComboboxChips ref={anchor}>\n              <ComboboxValue>\n                {(values) => (\n                  <React.Fragment>\n                    {values.map((username: string) => (\n                      <ComboboxChip key={username}>\n                        <Avatar className=\"size-4\">\n                          <AvatarImage\n                            src={`https://github.com/${username}.png`}\n                            alt={username}\n                          />\n                          <AvatarFallback>{username.charAt(0)}</AvatarFallback>\n                        </Avatar>\n                        {username}\n                      </ComboboxChip>\n                    ))}\n                    <ComboboxChipsInput\n                      placeholder={\n                        values.length > 0 ? undefined : \"Select a item...\"\n                      }\n                    />\n                  </React.Fragment>\n                )}\n              </ComboboxValue>\n            </ComboboxChips>\n            <ComboboxContent anchor={anchor}>\n              <ComboboxEmpty>No users found.</ComboboxEmpty>\n              <ComboboxList>\n                {(username) => (\n                  <ComboboxItem key={username} value={username}>\n                    <Avatar className=\"size-5\">\n                      <AvatarImage\n                        src={`https://github.com/${username}.png`}\n                        alt={username}\n                      />\n                      <AvatarFallback>{username.charAt(0)}</AvatarFallback>\n                    </Avatar>\n                    {username}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/github.json b/apps/v4/public/r/styles/base-maia/github.json
index 401a9e6743..87aa5433f8 100644
--- a/apps/v4/public/r/styles/base-maia/github.json
+++ b/apps/v4/public/r/styles/base-maia/github.json
@@ -30,7 +30,7 @@
   "files": [
     {
       "path": "registry/base-maia/blocks/github.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-maia/components/example\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/base-maia/ui/avatar\"\nimport { Badge } from \"@/registry/base-maia/ui/badge\"\nimport { Button } from \"@/registry/base-maia/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-maia/ui/card\"\nimport { Checkbox } from \"@/registry/base-maia/ui/checkbox\"\nimport {\n  Combobox,\n  ComboboxChip,\n  ComboboxChips,\n  ComboboxChipsInput,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxItem,\n  ComboboxList,\n  ComboboxValue,\n  useComboboxAnchor,\n} from \"@/registry/base-maia/ui/combobox\"\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"@/registry/base-maia/ui/command\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/base-maia/ui/drawer\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-maia/ui/dropdown-menu\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/base-maia/ui/empty\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n} from \"@/registry/base-maia/ui/field\"\nimport { Input } from \"@/registry/base-maia/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupTextarea,\n} from \"@/registry/base-maia/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemGroup,\n  ItemMedia,\n  ItemSeparator,\n  ItemTitle,\n} from \"@/registry/base-maia/ui/item\"\nimport { Kbd } from \"@/registry/base-maia/ui/kbd\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/base-maia/ui/native-select\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/base-maia/ui/popover\"\nimport { Separator } from \"@/registry/base-maia/ui/separator\"\nimport { Spinner } from \"@/registry/base-maia/ui/spinner\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/base-maia/ui/tabs\"\nimport { Textarea } from \"@/registry/base-maia/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/base-maia/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function GithubBlock() {\n  return (\n    <ExampleWrapper>\n      <CodespacesCard />\n      <AssignIssue />\n      <Navbar />\n      <RepositoryToolbar />\n      <Profile />\n      <ContributionsActivity />\n      <Contributors />\n    </ExampleWrapper>\n  )\n}\nfunction CodespacesCard() {\n  const [isCreatingCodespace, setIsCreatingCodespace] = React.useState(false)\n  return (\n    <Example title=\"Codespaces\" className=\"min-h-[550px] lg:p-12\">\n      <Card className=\"mx-auto w-full max-w-sm\" size=\"sm\">\n        <CardContent>\n          <Tabs defaultValue=\"codespaces\">\n            <TabsList className=\"w-full\">\n              <TabsTrigger value=\"codespaces\">Codespaces</TabsTrigger>\n              <TabsTrigger value=\"local\">Local</TabsTrigger>\n            </TabsList>\n            <TabsContent value=\"codespaces\">\n              <Item size=\"sm\" className=\"px-1 pt-2\">\n                <ItemContent>\n                  <ItemTitle>Codespaces</ItemTitle>\n                  <ItemDescription>\n                    Your workspaces in the cloud\n                  </ItemDescription>\n                </ItemContent>\n                <ItemActions>\n                  <Tooltip>\n                    <TooltipTrigger\n                      render={<Button variant=\"ghost\" size=\"icon-sm\" />}\n                    >\n                      <IconPlaceholder\n                        lucide=\"PlusIcon\"\n                        tabler=\"IconPlus\"\n                        hugeicons=\"PlusSignIcon\"\n                        phosphor=\"PlusIcon\"\n                        remixicon=\"RiAddLine\"\n                      />\n                    </TooltipTrigger>\n                    <TooltipContent side=\"bottom\">\n                      Create a codespace on main\n                    </TooltipContent>\n                  </Tooltip>\n                  <DropdownMenu>\n                    <Tooltip>\n                      <TooltipTrigger\n                        render={\n                          <DropdownMenuTrigger\n                            render={<Button variant=\"ghost\" size=\"icon-sm\" />}\n                          />\n                        }\n                      >\n                        <IconPlaceholder\n                          lucide=\"MoreHorizontalIcon\"\n                          tabler=\"IconDots\"\n                          hugeicons=\"MoreHorizontalCircle01Icon\"\n                          phosphor=\"DotsThreeOutlineIcon\"\n                          remixicon=\"RiMoreLine\"\n                        />\n                      </TooltipTrigger>\n                      <TooltipContent side=\"bottom\">\n                        Codespace repository configuration\n                      </TooltipContent>\n                    </Tooltip>\n                    <DropdownMenuContent align=\"end\" className=\"w-56\">\n                      <DropdownMenuGroup>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"PlusIcon\"\n                            tabler=\"IconPlus\"\n                            hugeicons=\"PlusSignIcon\"\n                            phosphor=\"PlusIcon\"\n                            remixicon=\"RiAddLine\"\n                          />\n                          New with options...\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"ContainerIcon\"\n                            tabler=\"IconBox\"\n                            hugeicons=\"CubeIcon\"\n                            phosphor=\"CubeIcon\"\n                            remixicon=\"RiBox1Line\"\n                          />\n                          Configure dev container\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"ZapIcon\"\n                            tabler=\"IconBolt\"\n                            hugeicons=\"ZapIcon\"\n                            phosphor=\"LightningIcon\"\n                            remixicon=\"RiFlashlightLine\"\n                          />\n                          Set up prebuilds\n                        </DropdownMenuItem>\n                      </DropdownMenuGroup>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuGroup>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"ServerIcon\"\n                            tabler=\"IconServer\"\n                            hugeicons=\"ServerStackIcon\"\n                            phosphor=\"HardDrivesIcon\"\n                            remixicon=\"RiHardDriveLine\"\n                          />\n                          Manage codespaces\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"ShareIcon\"\n                            tabler=\"IconShare2\"\n                            hugeicons=\"Share03Icon\"\n                            phosphor=\"ShareIcon\"\n                            remixicon=\"RiShareLine\"\n                          />\n                          Share deep link\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"InfoIcon\"\n                            tabler=\"IconInfoCircle\"\n                            hugeicons=\"AlertCircleIcon\"\n                            phosphor=\"InfoIcon\"\n                            remixicon=\"RiInformationLine\"\n                          />\n                          What are codespaces?\n                        </DropdownMenuItem>\n                      </DropdownMenuGroup>\n                    </DropdownMenuContent>\n                  </DropdownMenu>\n                </ItemActions>\n              </Item>\n              <Separator className=\"-mx-2 my-2 w-auto!\" />\n              <Empty className=\"p-4\">\n                <EmptyHeader>\n                  <EmptyMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"ServerIcon\"\n                      tabler=\"IconServer\"\n                      hugeicons=\"ServerStackIcon\"\n                      phosphor=\"HardDrivesIcon\"\n                      remixicon=\"RiHardDriveLine\"\n                    />\n                  </EmptyMedia>\n                  <EmptyTitle>No codespaces</EmptyTitle>\n                  <EmptyDescription>\n                    You don&apos;t have any codespaces with this repository\n                    checked out\n                  </EmptyDescription>\n                </EmptyHeader>\n                <EmptyContent>\n                  <Button\n                    size=\"sm\"\n                    onClick={() => {\n                      setIsCreatingCodespace(true)\n                      setTimeout(() => {\n                        setIsCreatingCodespace(false)\n                      }, 2000)\n                    }}\n                    disabled={isCreatingCodespace}\n                  >\n                    {isCreatingCodespace ? (\n                      <Spinner data-icon=\"inline-start\" />\n                    ) : (\n                      \"\"\n                    )}\n                    Create Codespace\n                  </Button>\n                  <a\n                    href=\"#learn-more\"\n                    className=\"text-muted-foreground text-xs underline underline-offset-4\"\n                  >\n                    Learn more about codespaces\n                  </a>\n                </EmptyContent>\n              </Empty>\n              <Separator className=\"-mx-2 my-2 w-auto!\" />\n              <div className=\"text-muted-foreground p-1.5 text-xs\">\n                Codespace usage for this repository is paid for by{\" \"}\n                <span className=\"font-medium\">shadcn</span>.\n              </div>\n            </TabsContent>\n            <TabsContent value=\"local\">\n              <Item size=\"sm\" className=\"hidden p-0\">\n                <ItemContent>\n                  <ItemTitle className=\"gap-2\">\n                    <IconPlaceholder\n                      lucide=\"TerminalIcon\"\n                      tabler=\"IconTerminal\"\n                      hugeicons=\"ComputerTerminal01Icon\"\n                      phosphor=\"TerminalIcon\"\n                      remixicon=\"RiTerminalBoxLine\"\n                      className=\"size-4\"\n                    />\n                    Clone\n                  </ItemTitle>\n                </ItemContent>\n                <ItemActions>\n                  <Tooltip>\n                    <TooltipTrigger\n                      render={<Button variant=\"ghost\" size=\"icon\" />}\n                    >\n                      <IconPlaceholder\n                        lucide=\"InfoIcon\"\n                        tabler=\"IconInfoCircle\"\n                        hugeicons=\"AlertCircleIcon\"\n                        phosphor=\"InfoIcon\"\n                        remixicon=\"RiInformationLine\"\n                      />\n                    </TooltipTrigger>\n                    <TooltipContent side=\"left\">\n                      Which remote URL should I use?\n                    </TooltipContent>\n                  </Tooltip>\n                </ItemActions>\n              </Item>\n              <Tabs defaultValue=\"https\">\n                <TabsList\n                  variant=\"line\"\n                  className=\"w-full justify-start border-b *:[button]:flex-0\"\n                >\n                  <TabsTrigger value=\"https\">HTTPS</TabsTrigger>\n                  <TabsTrigger value=\"ssh\">SSH</TabsTrigger>\n                  <TabsTrigger value=\"cli\">GitHub CLI</TabsTrigger>\n                </TabsList>\n                <div className=\"bg-muted/30 rounded-md border p-2\">\n                  <TabsContent value=\"https\">\n                    <Field className=\"gap-2\">\n                      <FieldLabel htmlFor=\"https-url\" className=\"sr-only\">\n                        HTTPS URL\n                      </FieldLabel>\n                      <InputGroup>\n                        <InputGroupAddon align=\"inline-end\">\n                          <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                              phosphor=\"CopyIcon\"\n                              remixicon=\"RiFileCopyLine\"\n                            />\n                          </InputGroupButton>\n                        </InputGroupAddon>\n                        <InputGroupInput\n                          id=\"https-url\"\n                          defaultValue=\"https://github.com/shadcn-ui/ui.git\"\n                          readOnly\n                        />\n                      </InputGroup>\n                      <FieldDescription>\n                        Clone using the web URL.\n                      </FieldDescription>\n                    </Field>\n                  </TabsContent>\n                  <TabsContent value=\"ssh\">\n                    <Field className=\"gap-2\">\n                      <FieldLabel htmlFor=\"ssh-url\" className=\"sr-only\">\n                        SSH URL\n                      </FieldLabel>\n                      <InputGroup>\n                        <InputGroupAddon align=\"inline-end\">\n                          <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                              phosphor=\"CopyIcon\"\n                              remixicon=\"RiFileCopyLine\"\n                            />\n                          </InputGroupButton>\n                        </InputGroupAddon>\n                        <InputGroupInput\n                          id=\"ssh-url\"\n                          defaultValue=\"git@github.com:shadcn-ui/ui.git\"\n                          readOnly\n                        />\n                      </InputGroup>\n                      <FieldDescription>\n                        Use a password-protected SSH key.\n                      </FieldDescription>\n                    </Field>\n                  </TabsContent>\n                  <TabsContent value=\"cli\">\n                    <Field className=\"gap-2\">\n                      <FieldLabel htmlFor=\"cli-command\" className=\"sr-only\">\n                        CLI Command\n                      </FieldLabel>\n                      <InputGroup>\n                        <InputGroupAddon align=\"inline-end\">\n                          <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                              phosphor=\"CopyIcon\"\n                              remixicon=\"RiFileCopyLine\"\n                            />\n                          </InputGroupButton>\n                        </InputGroupAddon>\n                        <InputGroupInput\n                          id=\"cli-command\"\n                          defaultValue=\"gh repo clone shadcn-ui/ui\"\n                          readOnly\n                        />\n                      </InputGroup>\n                      <FieldDescription>\n                        Work fast with our official CLI.{\" \"}\n                        <a href=\"#learn-more\">Learn more</a>\n                      </FieldDescription>\n                    </Field>\n                  </TabsContent>\n                </div>\n              </Tabs>\n              <Separator className=\"-mx-2 my-2 w-auto!\" />\n              <div className=\"flex flex-col\">\n                <Button\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  className=\"justify-start gap-1.5\"\n                >\n                  <IconPlaceholder\n                    lucide=\"MonitorIcon\"\n                    tabler=\"IconDeviceDesktop\"\n                    hugeicons=\"ComputerIcon\"\n                    phosphor=\"MonitorIcon\"\n                    remixicon=\"RiComputerLine\"\n                    data-icon=\"inline-start\"\n                  />\n                  Open with GitHub Desktop\n                </Button>\n                <Button\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  className=\"justify-start gap-1.5\"\n                >\n                  <IconPlaceholder\n                    lucide=\"DownloadIcon\"\n                    tabler=\"IconDownload\"\n                    hugeicons=\"DownloadIcon\"\n                    phosphor=\"DownloadIcon\"\n                    remixicon=\"RiDownloadLine\"\n                    data-icon=\"inline-start\"\n                  />\n                  Download ZIP\n                </Button>\n              </div>\n            </TabsContent>\n          </Tabs>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\nfunction RepositoryToolbar() {\n  const [selectedBranch, setSelectedBranch] = React.useState(\"main\")\n  return (\n    <Example title=\"Repository Toolbar\">\n      <div className=\"flex items-center gap-2\">\n        <InputGroup>\n          <InputGroupInput placeholder=\"Go to file\" />\n          <InputGroupAddon align=\"inline-start\">\n            <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n              <IconPlaceholder\n                lucide=\"SearchIcon\"\n                tabler=\"IconSearch\"\n                hugeicons=\"SearchIcon\"\n                phosphor=\"MagnifyingGlassIcon\"\n                remixicon=\"RiSearchLine\"\n              />\n            </InputGroupButton>\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">\n            <Kbd>t</Kbd>\n          </InputGroupAddon>\n        </InputGroup>\n        <DropdownMenu>\n          <DropdownMenuTrigger render={<Button variant=\"outline\" />}>\n            Add File\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDown01Icon\"\n              phosphor=\"CaretDownIcon\"\n              remixicon=\"RiArrowDownSLine\"\n              data-icon=\"inline-end\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"PlusIcon\"\n                  tabler=\"IconPlus\"\n                  hugeicons=\"PlusSignIcon\"\n                  phosphor=\"PlusIcon\"\n                  remixicon=\"RiAddLine\"\n                />\n                Create new file\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"UploadIcon\"\n                  hugeicons=\"Upload01Icon\"\n                  tabler=\"IconUpload\"\n                  phosphor=\"UploadIcon\"\n                  remixicon=\"RiUploadLine\"\n                />\n                Upload files\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <Popover>\n          <Tooltip>\n            <TooltipTrigger\n              render={\n                <PopoverTrigger\n                  render={<Button variant=\"outline\" size=\"icon\" />}\n                />\n              }\n            >\n              <IconPlaceholder\n                lucide=\"CloudCogIcon\"\n                hugeicons=\"AiCloud01Icon\"\n                tabler=\"IconCloudCog\"\n                phosphor=\"CloudArrowUpIcon\"\n                remixicon=\"RiUploadCloudLine\"\n              />\n            </TooltipTrigger>\n            <TooltipContent>New Agent Task</TooltipContent>\n          </Tooltip>\n          <PopoverContent side=\"bottom\" align=\"end\" className=\"w-96\">\n            <Field>\n              <FieldLabel htmlFor=\"new-agent-task\">New Agent Task</FieldLabel>\n              <InputGroup>\n                <InputGroupTextarea placeholder=\"Describe your task in natural language.\"></InputGroupTextarea>\n                <InputGroupAddon align=\"block-end\">\n                  <Popover>\n                    <Tooltip>\n                      <PopoverTrigger\n                        render={\n                          <TooltipTrigger\n                            render={\n                              <InputGroupButton\n                                variant=\"outline\"\n                                size=\"icon-sm\"\n                              />\n                            }\n                          />\n                        }\n                      >\n                        <IconPlaceholder\n                          lucide=\"GitBranchIcon\"\n                          hugeicons=\"GitBranchIcon\"\n                          tabler=\"IconGitBranch\"\n                          phosphor=\"GitBranchIcon\"\n                          remixicon=\"RiGitBranchLine\"\n                        />\n                      </PopoverTrigger>\n                      <TooltipContent>Select a branch</TooltipContent>\n                    </Tooltip>\n                    <PopoverContent side=\"bottom\" align=\"start\" className=\"p-1\">\n                      <Field>\n                        <FieldLabel htmlFor=\"select-branch\" className=\"sr-only\">\n                          Select a Branch\n                        </FieldLabel>\n                        <Command>\n                          <CommandInput\n                            id=\"select-branch\"\n                            placeholder=\"Find a branch\"\n                          />\n                          <CommandEmpty>No branches found</CommandEmpty>\n                          <CommandList>\n                            <CommandGroup>\n                              {[\n                                \"main\",\n                                \"develop\",\n                                \"feature/123\",\n                                \"feature/user-authentication\",\n                                \"feature/dashboard-redesign\",\n                                \"bugfix/login-error\",\n                                \"hotfix/security-patch\",\n                                \"release/v2.0.0\",\n                                \"feature/api-integration\",\n                                \"bugfix/memory-leak\",\n                                \"feature/dark-mode\",\n                                \"feature/responsive-design\",\n                                \"bugfix/typo-fix\",\n                                \"feature/search-functionality\",\n                                \"release/v1.9.0\",\n                                \"feature/notifications\",\n                                \"bugfix/cache-issue\",\n                                \"feature/payment-gateway\",\n                                \"hotfix/critical-bug\",\n                                \"feature/admin-panel\",\n                                \"bugfix/validation-error\",\n                                \"feature/analytics\",\n                                \"release/v2.1.0\",\n                              ].map((branch) => (\n                                <CommandItem\n                                  key={branch}\n                                  value={branch}\n                                  onSelect={() => setSelectedBranch(branch)}\n                                  data-checked={selectedBranch === branch}\n                                >\n                                  {branch}\n                                </CommandItem>\n                              ))}\n                            </CommandGroup>\n                          </CommandList>\n                        </Command>\n                      </Field>\n                    </PopoverContent>\n                  </Popover>\n                  <Popover>\n                    <Tooltip>\n                      <PopoverTrigger\n                        render={\n                          <TooltipTrigger\n                            render={\n                              <InputGroupButton\n                                variant=\"outline\"\n                                size=\"icon-sm\"\n                              />\n                            }\n                          />\n                        }\n                      >\n                        <IconPlaceholder\n                          lucide=\"BotIcon\"\n                          hugeicons=\"RoboticIcon\"\n                          tabler=\"IconRobot\"\n                          phosphor=\"RobotIcon\"\n                          remixicon=\"RiRobotLine\"\n                        />\n                      </PopoverTrigger>\n                      <TooltipContent>Select Agent</TooltipContent>\n                    </Tooltip>\n                    <PopoverContent side=\"bottom\" align=\"start\">\n                      <Empty className=\"gap-4 p-0\">\n                        <EmptyHeader>\n                          <EmptyTitle className=\"text-sm\">\n                            This repository has no custom agents\n                          </EmptyTitle>\n                          <EmptyDescription className=\"text-xs\">\n                            Custom agents are reusable instructions and tools in\n                            your repository.\n                          </EmptyDescription>\n                        </EmptyHeader>\n                        <EmptyContent>\n                          <Button variant=\"outline\" size=\"sm\">\n                            Create Custom Agent\n                          </Button>\n                        </EmptyContent>\n                      </Empty>\n                    </PopoverContent>\n                  </Popover>\n                  <Tooltip>\n                    <TooltipTrigger\n                      render={\n                        <InputGroupButton\n                          variant=\"ghost\"\n                          size=\"icon-sm\"\n                          className=\"ml-auto\"\n                        />\n                      }\n                    >\n                      <IconPlaceholder\n                        lucide=\"SendIcon\"\n                        hugeicons=\"SentIcon\"\n                        tabler=\"IconSend\"\n                        phosphor=\"PaperPlaneTiltIcon\"\n                        remixicon=\"RiSendPlaneLine\"\n                      />\n                    </TooltipTrigger>\n                    <TooltipContent className=\"flex items-center gap-2 pr-2\">\n                      Start Task <Kbd>⏎</Kbd>\n                    </TooltipContent>\n                  </Tooltip>\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n          </PopoverContent>\n        </Popover>\n      </div>\n    </Example>\n  )\n}\nfunction Navbar() {\n  return (\n    <Example title=\"Account Menu\">\n      <header className=\"flex h-14 w-full items-center gap-2\">\n        <Drawer direction=\"left\">\n          <DrawerTrigger asChild>\n            <Button variant=\"outline\" size=\"icon\">\n              <IconPlaceholder\n                lucide=\"MenuIcon\"\n                hugeicons=\"Menu09Icon\"\n                tabler=\"IconMenu\"\n                phosphor=\"ListIcon\"\n                remixicon=\"RiListUnordered\"\n              />\n              <span className=\"sr-only\">Open menu</span>\n            </Button>\n          </DrawerTrigger>\n          <DrawerContent className=\"max-w-72\">\n            <DrawerHeader className=\"flex flex-row items-center justify-between px-5 pb-0\">\n              <DrawerTitle>Menu</DrawerTitle>\n              <DrawerClose asChild>\n                <Button variant=\"ghost\" size=\"icon-sm\" >\n                  <IconPlaceholder\n                    lucide=\"XIcon\"\n                    tabler=\"IconX\"\n                    hugeicons=\"Cancel01Icon\"\n                    phosphor=\"XIcon\"\n                    remixicon=\"RiCloseLine\"\n                  />\n                  <span className=\"sr-only\">Close</span>\n                </Button>\n              </DrawerClose>\n            </DrawerHeader>\n            <div className=\"p-2\">\n              <ItemGroup className=\"gap-px\">\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"HomeIcon\"\n                      tabler=\"IconHome\"\n                      hugeicons=\"HomeIcon\"\n                      phosphor=\"HouseIcon\"\n                      remixicon=\"RiHomeLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Home</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"CircleIcon\"\n                      tabler=\"IconCircle\"\n                      hugeicons=\"CircleIcon\"\n                      phosphor=\"CircleIcon\"\n                      remixicon=\"RiCircleLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Issues</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"GitBranchIcon\"\n                      tabler=\"IconGitBranch\"\n                      hugeicons=\"GitBranchIcon\"\n                      phosphor=\"GitBranchIcon\"\n                      remixicon=\"RiGitBranchLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Pull requests</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"LayoutGridIcon\"\n                      tabler=\"IconLayoutGrid\"\n                      hugeicons=\"GridIcon\"\n                      phosphor=\"GridFourIcon\"\n                      remixicon=\"RiGridLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Projects</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"MailIcon\"\n                      tabler=\"IconMail\"\n                      hugeicons=\"MailIcon\"\n                      phosphor=\"EnvelopeIcon\"\n                      remixicon=\"RiMailLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Discussions</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"ServerIcon\"\n                      tabler=\"IconServer\"\n                      hugeicons=\"ServerStackIcon\"\n                      phosphor=\"HardDrivesIcon\"\n                      remixicon=\"RiHardDriveLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Codespaces</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"BotIcon\"\n                      tabler=\"IconRobot\"\n                      hugeicons=\"RoboticIcon\"\n                      phosphor=\"RobotIcon\"\n                      remixicon=\"RiRobotLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Copilot</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"SparklesIcon\"\n                      tabler=\"IconSparkles\"\n                      hugeicons=\"SparklesIcon\"\n                      phosphor=\"SparkleIcon\"\n                      remixicon=\"RiSparklingLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Spark</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <ItemSeparator />\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"SearchIcon\"\n                      tabler=\"IconSearch\"\n                      hugeicons=\"SearchIcon\"\n                      phosphor=\"MagnifyingGlassIcon\"\n                      remixicon=\"RiSearchLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Explore</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"ShoppingBagIcon\"\n                      tabler=\"IconShoppingBag\"\n                      hugeicons=\"ShoppingBasket01Icon\"\n                      phosphor=\"BagIcon\"\n                      remixicon=\"RiShoppingBagLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Marketplace</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"LinkIcon\"\n                      tabler=\"IconLink\"\n                      hugeicons=\"LinkIcon\"\n                      phosphor=\"LinkIcon\"\n                      remixicon=\"RiLinksLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>MCP registry</ItemTitle>\n                  </ItemContent>\n                </Item>\n              </ItemGroup>\n            </div>\n          </DrawerContent>\n        </Drawer>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <Button\n                variant=\"ghost\"\n                size=\"icon\"\n                className=\"ml-auto rounded-full\"\n              />\n            }\n          >\n            <Avatar>\n              <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"shadcn\" />\n              <AvatarFallback>SC</AvatarFallback>\n            </Avatar>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-56\" align=\"end\">\n            <DropdownMenuGroup>\n              <DropdownMenuLabel className=\"p-0 font-normal\">\n                <Item className=\"px-2 py-1 pb-0.5\" size=\"sm\">\n                  <ItemMedia>\n                    <Avatar>\n                      <AvatarImage\n                        src=\"https://github.com/shadcn.png\"\n                        alt=\"shadcn\"\n                      />\n                      <AvatarFallback>SC</AvatarFallback>\n                    </Avatar>\n                  </ItemMedia>\n                  <ItemContent className=\"gap-0\">\n                    <ItemTitle className=\"text-foreground text-sm\">\n                      shadcn\n                    </ItemTitle>\n                    <ItemDescription className=\"text-xs\">\n                      shadcn@example.com\n                    </ItemDescription>\n                  </ItemContent>\n                </Item>\n              </DropdownMenuLabel>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SmileIcon\"\n                  tabler=\"IconMoodSmile\"\n                  hugeicons=\"SmileIcon\"\n                  phosphor=\"SmileyIcon\"\n                  remixicon=\"RiEmotionLine\"\n                />\n                Set status\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CircleAlertIcon\"\n                  tabler=\"IconExclamationCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                  phosphor=\"WarningCircleIcon\"\n                  remixicon=\"RiErrorWarningLine\"\n                />\n                Single sign-on\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"UserIcon\"\n                  tabler=\"IconUser\"\n                  hugeicons=\"UserIcon\"\n                  phosphor=\"UserIcon\"\n                  remixicon=\"RiUserLine\"\n                />\n                Profile\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"FolderIcon\"\n                  tabler=\"IconFolder\"\n                  hugeicons=\"FolderIcon\"\n                  phosphor=\"FolderIcon\"\n                  remixicon=\"RiFolderLine\"\n                />\n                Repositories\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"StarIcon\"\n                  tabler=\"IconStar\"\n                  hugeicons=\"StarIcon\"\n                  phosphor=\"StarIcon\"\n                  remixicon=\"RiStarLine\"\n                />\n                Stars\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CodeIcon\"\n                  tabler=\"IconCode\"\n                  hugeicons=\"CodeIcon\"\n                  phosphor=\"CodeIcon\"\n                  remixicon=\"RiCodeLine\"\n                />\n                Gists\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"FolderIcon\"\n                  tabler=\"IconFolder\"\n                  hugeicons=\"FolderIcon\"\n                  phosphor=\"FolderIcon\"\n                  remixicon=\"RiFolderLine\"\n                />\n                Organizations\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"ServerIcon\"\n                  tabler=\"IconServer\"\n                  hugeicons=\"ServerStackIcon\"\n                  phosphor=\"HardDrivesIcon\"\n                  remixicon=\"RiHardDriveLine\"\n                />\n                Enterprises\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"HeartIcon\"\n                  tabler=\"IconHeart\"\n                  hugeicons=\"FavouriteIcon\"\n                  phosphor=\"HeartIcon\"\n                  remixicon=\"RiHeartLine\"\n                />\n                Sponsors\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SettingsIcon\"\n                  tabler=\"IconSettings\"\n                  hugeicons=\"SettingsIcon\"\n                  phosphor=\"GearIcon\"\n                  remixicon=\"RiSettingsLine\"\n                />\n                Settings\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"BotIcon\"\n                  tabler=\"IconRobot\"\n                  hugeicons=\"RoboticIcon\"\n                  phosphor=\"RobotIcon\"\n                  remixicon=\"RiRobotLine\"\n                />\n                Copilot settings\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SparklesIcon\"\n                  tabler=\"IconSparkles\"\n                  hugeicons=\"SparklesIcon\"\n                  phosphor=\"SparkleIcon\"\n                  remixicon=\"RiSparklingLine\"\n                />\n                Feature preview\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"MonitorIcon\"\n                  tabler=\"IconDeviceDesktop\"\n                  hugeicons=\"ComputerIcon\"\n                  phosphor=\"MonitorIcon\"\n                  remixicon=\"RiComputerLine\"\n                />\n                Appearance\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"UserIcon\"\n                  tabler=\"IconUser\"\n                  hugeicons=\"UserIcon\"\n                  phosphor=\"UserIcon\"\n                  remixicon=\"RiUserLine\"\n                />\n                Accessibility\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUpIcon\"\n                  phosphor=\"ArrowUpIcon\"\n                  remixicon=\"RiArrowUpLine\"\n                />\n                Upgrade\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"LogOutIcon\"\n                  tabler=\"IconLogout\"\n                  hugeicons=\"LogoutIcon\"\n                  phosphor=\"SignOutIcon\"\n                  remixicon=\"RiLogoutBoxLine\"\n                />\n                Sign out\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </header>\n    </Example>\n  )\n}\nconst usernames = [\n  \"shadcn\",\n  \"vercel\",\n  \"nextjs\",\n  \"tailwindlabs\",\n  \"typescript-lang\",\n  \"eslint\",\n  \"prettier\",\n  \"babel\",\n  \"webpack\",\n  \"rollup\",\n  \"parcel\",\n  \"vite\",\n  \"react\",\n  \"vue\",\n  \"angular\",\n  \"solid\",\n]\nfunction Contributors() {\n  return (\n    <Example title=\"Contributors\" className=\"items-center lg:p-16\">\n      <Card className=\"max-w-sm\">\n        <CardHeader>\n          <CardTitle>\n            Contributors <Badge variant=\"secondary\">312</Badge>\n          </CardTitle>\n        </CardHeader>\n        <CardContent>\n          <div className=\"flex flex-wrap gap-2\">\n            {usernames.map((username) => (\n              <Avatar key={username}>\n                <AvatarImage\n                  src={`https://github.com/${username}.png`}\n                  alt={username}\n                />\n                <AvatarFallback>{username.charAt(0)}</AvatarFallback>\n              </Avatar>\n            ))}\n          </div>\n        </CardContent>\n        <CardFooter>\n          <a href=\"#\" className=\"text-sm underline underline-offset-4\">\n            + 810 contributors\n          </a>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\nfunction Profile() {\n  return (\n    <Example title=\"Profile\" className=\"items-center justify-center\">\n      <Card className=\"mx-auto w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>Profile</CardTitle>\n          <CardDescription>Manage your profile information.</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form id=\"profile\">\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"name\">Name</FieldLabel>\n                <Input id=\"name\" placeholder=\"shadcn\" />\n                <FieldDescription>\n                  Your name may appear around GitHub where you contribute or are\n                  mentioned. You can remove it at any time.\n                </FieldDescription>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"email\">Public Email</FieldLabel>\n                <NativeSelect id=\"email\">\n                  <NativeSelectOption value=\"m@shadcn.com\">\n                    m@shadcn.com\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"m@gmail.com\">\n                    m@gmail.com\n                  </NativeSelectOption>\n                </NativeSelect>\n                <FieldDescription>\n                  You can manage verified email addresses in your{\" \"}\n                  <a href=\"#email-settings\">email settings</a>.\n                </FieldDescription>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"bio\">Bio</FieldLabel>\n                <Textarea\n                  id=\"bio\"\n                  placeholder=\"Tell us a little bit about yourself\"\n                />\n                <FieldDescription>\n                  You can <span>@mention</span> other users and organizations to\n                  link to them.\n                </FieldDescription>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button form=\"profile\">Save Profile</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\nfunction ContributionsActivity() {\n  return (\n    <Example title=\"Contributions Activity\" className=\"justify-center\">\n      <Card className=\"mx-auto w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>Contributions & Activity</CardTitle>\n          <CardDescription>\n            Manage your contributions and activity visibility.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form id=\"contributions-activity\">\n            <FieldGroup>\n              <FieldSet>\n                <FieldLegend className=\"sr-only\">\n                  Contributions & activity\n                </FieldLegend>\n                <FieldGroup className=\"gap-3\">\n                  <Field orientation=\"horizontal\">\n                    <Checkbox id=\"private-profile\" />\n                    <FieldContent>\n                      <FieldLabel\n                        htmlFor=\"private-profile\"\n                        className=\"font-normal\"\n                      >\n                        Make profile private and hide activity\n                      </FieldLabel>\n                      <FieldDescription>\n                        Enabling this will hide your contributions and activity\n                        from your GitHub profile and from social features like\n                        followers, stars, feeds, leaderboards and releases.\n                      </FieldDescription>\n                    </FieldContent>\n                  </Field>\n                  <Field orientation=\"horizontal\">\n                    <Checkbox id=\"private-contributions\" defaultChecked />\n                    <FieldContent>\n                      <FieldLabel\n                        htmlFor=\"private-contributions\"\n                        className=\"font-normal\"\n                      >\n                        Include private contributions on my profile\n                      </FieldLabel>\n                      <FieldDescription>\n                        Your contribution graph, achievements, and activity\n                        overview will show your private contributions without\n                        revealing any repository or organization information.{\" \"}\n                        <a href=\"#read-more\">Read more</a>.\n                      </FieldDescription>\n                    </FieldContent>\n                  </Field>\n                </FieldGroup>\n              </FieldSet>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button form=\"contributions-activity\">Save Changes</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\nconst users = [\n  \"shadcn\",\n  \"maxleiter\",\n  \"evilrabbit\",\n  \"pranathip\",\n  \"jorgezreik\",\n  \"shuding\",\n  \"rauchg\",\n]\nfunction AssignIssue() {\n  const anchor = useComboboxAnchor()\n  return (\n    <Example title=\"User Select\" className=\"items-center justify-center\">\n      <Card className=\"w-full max-w-sm\" size=\"sm\">\n        <CardHeader className=\"border-b\">\n          <CardTitle className=\"text-sm\">Assign Issue</CardTitle>\n          <CardDescription className=\"text-sm\">\n            Select users to assign to this issue.\n          </CardDescription>\n          <CardAction>\n            <Tooltip>\n              <TooltipTrigger\n                render={<Button variant=\"outline\" size=\"icon-xs\" />}\n              >\n                <IconPlaceholder\n                  lucide=\"PlusIcon\"\n                  tabler=\"IconPlus\"\n                  hugeicons=\"PlusSignIcon\"\n                  phosphor=\"PlusIcon\"\n                  remixicon=\"RiAddLine\"\n                />\n              </TooltipTrigger>\n              <TooltipContent>Add user</TooltipContent>\n            </Tooltip>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <Combobox\n            multiple\n            autoHighlight\n            items={users}\n            defaultValue={[users[0]]}\n          >\n            <ComboboxChips ref={anchor}>\n              <ComboboxValue>\n                {(values) => (\n                  <React.Fragment>\n                    {values.map((username: string) => (\n                      <ComboboxChip key={username}>\n                        <Avatar className=\"size-4\">\n                          <AvatarImage\n                            src={`https://github.com/${username}.png`}\n                            alt={username}\n                          />\n                          <AvatarFallback>{username.charAt(0)}</AvatarFallback>\n                        </Avatar>\n                        {username}\n                      </ComboboxChip>\n                    ))}\n                    <ComboboxChipsInput\n                      placeholder={\n                        values.length > 0 ? undefined : \"Select a item...\"\n                      }\n                    />\n                  </React.Fragment>\n                )}\n              </ComboboxValue>\n            </ComboboxChips>\n            <ComboboxContent anchor={anchor}>\n              <ComboboxEmpty>No users found.</ComboboxEmpty>\n              <ComboboxList>\n                {(username) => (\n                  <ComboboxItem key={username} value={username}>\n                    <Avatar className=\"size-5\">\n                      <AvatarImage\n                        src={`https://github.com/${username}.png`}\n                        alt={username}\n                      />\n                      <AvatarFallback>{username.charAt(0)}</AvatarFallback>\n                    </Avatar>\n                    {username}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-maia/components/example\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/base-maia/ui/avatar\"\nimport { Badge } from \"@/registry/base-maia/ui/badge\"\nimport { Button } from \"@/registry/base-maia/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-maia/ui/card\"\nimport { Checkbox } from \"@/registry/base-maia/ui/checkbox\"\nimport {\n  Combobox,\n  ComboboxChip,\n  ComboboxChips,\n  ComboboxChipsInput,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxItem,\n  ComboboxList,\n  ComboboxValue,\n  useComboboxAnchor,\n} from \"@/registry/base-maia/ui/combobox\"\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"@/registry/base-maia/ui/command\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/base-maia/ui/drawer\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-maia/ui/dropdown-menu\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/base-maia/ui/empty\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n} from \"@/registry/base-maia/ui/field\"\nimport { Input } from \"@/registry/base-maia/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupTextarea,\n} from \"@/registry/base-maia/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemGroup,\n  ItemMedia,\n  ItemSeparator,\n  ItemTitle,\n} from \"@/registry/base-maia/ui/item\"\nimport { Kbd } from \"@/registry/base-maia/ui/kbd\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/base-maia/ui/native-select\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/base-maia/ui/popover\"\nimport { Separator } from \"@/registry/base-maia/ui/separator\"\nimport { Spinner } from \"@/registry/base-maia/ui/spinner\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/base-maia/ui/tabs\"\nimport { Textarea } from \"@/registry/base-maia/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/base-maia/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function GithubBlock() {\n  return (\n    <ExampleWrapper>\n      <CodespacesCard />\n      <AssignIssue />\n      <Navbar />\n      <RepositoryToolbar />\n      <Profile />\n      <ContributionsActivity />\n      <Contributors />\n    </ExampleWrapper>\n  )\n}\nfunction CodespacesCard() {\n  const [isCreatingCodespace, setIsCreatingCodespace] = React.useState(false)\n  return (\n    <Example title=\"Codespaces\" className=\"min-h-[550px] lg:p-12\">\n      <Card className=\"mx-auto w-full max-w-sm\" size=\"sm\">\n        <CardContent>\n          <Tabs defaultValue=\"codespaces\">\n            <TabsList className=\"w-full\">\n              <TabsTrigger value=\"codespaces\">Codespaces</TabsTrigger>\n              <TabsTrigger value=\"local\">Local</TabsTrigger>\n            </TabsList>\n            <TabsContent value=\"codespaces\">\n              <Item size=\"sm\" className=\"px-1 pt-2\">\n                <ItemContent>\n                  <ItemTitle>Codespaces</ItemTitle>\n                  <ItemDescription>\n                    Your workspaces in the cloud\n                  </ItemDescription>\n                </ItemContent>\n                <ItemActions>\n                  <Tooltip>\n                    <TooltipTrigger\n                      render={<Button variant=\"ghost\" size=\"icon-sm\" />}\n                    >\n                      <IconPlaceholder\n                        lucide=\"PlusIcon\"\n                        tabler=\"IconPlus\"\n                        hugeicons=\"PlusSignIcon\"\n                        phosphor=\"PlusIcon\"\n                        remixicon=\"RiAddLine\"\n                      />\n                    </TooltipTrigger>\n                    <TooltipContent side=\"bottom\">\n                      Create a codespace on main\n                    </TooltipContent>\n                  </Tooltip>\n                  <DropdownMenu>\n                    <Tooltip>\n                      <TooltipTrigger\n                        render={\n                          <DropdownMenuTrigger\n                            render={<Button variant=\"ghost\" size=\"icon-sm\" />}\n                          />\n                        }\n                      >\n                        <IconPlaceholder\n                          lucide=\"MoreHorizontalIcon\"\n                          tabler=\"IconDots\"\n                          hugeicons=\"MoreHorizontalCircle01Icon\"\n                          phosphor=\"DotsThreeOutlineIcon\"\n                          remixicon=\"RiMoreLine\"\n                        />\n                      </TooltipTrigger>\n                      <TooltipContent side=\"bottom\">\n                        Codespace repository configuration\n                      </TooltipContent>\n                    </Tooltip>\n                    <DropdownMenuContent align=\"end\" className=\"w-56\">\n                      <DropdownMenuGroup>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"PlusIcon\"\n                            tabler=\"IconPlus\"\n                            hugeicons=\"PlusSignIcon\"\n                            phosphor=\"PlusIcon\"\n                            remixicon=\"RiAddLine\"\n                          />\n                          New with options...\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"ContainerIcon\"\n                            tabler=\"IconBox\"\n                            hugeicons=\"CubeIcon\"\n                            phosphor=\"CubeIcon\"\n                            remixicon=\"RiBox1Line\"\n                          />\n                          Configure dev container\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"ZapIcon\"\n                            tabler=\"IconBolt\"\n                            hugeicons=\"ZapIcon\"\n                            phosphor=\"LightningIcon\"\n                            remixicon=\"RiFlashlightLine\"\n                          />\n                          Set up prebuilds\n                        </DropdownMenuItem>\n                      </DropdownMenuGroup>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuGroup>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"ServerIcon\"\n                            tabler=\"IconServer\"\n                            hugeicons=\"ServerStackIcon\"\n                            phosphor=\"HardDrivesIcon\"\n                            remixicon=\"RiHardDriveLine\"\n                          />\n                          Manage codespaces\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"ShareIcon\"\n                            tabler=\"IconShare2\"\n                            hugeicons=\"Share03Icon\"\n                            phosphor=\"ShareIcon\"\n                            remixicon=\"RiShareLine\"\n                          />\n                          Share deep link\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"InfoIcon\"\n                            tabler=\"IconInfoCircle\"\n                            hugeicons=\"AlertCircleIcon\"\n                            phosphor=\"InfoIcon\"\n                            remixicon=\"RiInformationLine\"\n                          />\n                          What are codespaces?\n                        </DropdownMenuItem>\n                      </DropdownMenuGroup>\n                    </DropdownMenuContent>\n                  </DropdownMenu>\n                </ItemActions>\n              </Item>\n              <Separator className=\"-mx-2 my-2 w-auto!\" />\n              <Empty className=\"p-4\">\n                <EmptyHeader>\n                  <EmptyMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"ServerIcon\"\n                      tabler=\"IconServer\"\n                      hugeicons=\"ServerStackIcon\"\n                      phosphor=\"HardDrivesIcon\"\n                      remixicon=\"RiHardDriveLine\"\n                    />\n                  </EmptyMedia>\n                  <EmptyTitle>No codespaces</EmptyTitle>\n                  <EmptyDescription>\n                    You don&apos;t have any codespaces with this repository\n                    checked out\n                  </EmptyDescription>\n                </EmptyHeader>\n                <EmptyContent>\n                  <Button\n                    size=\"sm\"\n                    onClick={() => {\n                      setIsCreatingCodespace(true)\n                      setTimeout(() => {\n                        setIsCreatingCodespace(false)\n                      }, 2000)\n                    }}\n                    disabled={isCreatingCodespace}\n                  >\n                    {isCreatingCodespace ? (\n                      <Spinner data-icon=\"inline-start\" />\n                    ) : (\n                      \"\"\n                    )}\n                    Create Codespace\n                  </Button>\n                  <a\n                    href=\"#learn-more\"\n                    className=\"text-muted-foreground text-xs underline underline-offset-4\"\n                  >\n                    Learn more about codespaces\n                  </a>\n                </EmptyContent>\n              </Empty>\n              <Separator className=\"-mx-2 my-2 w-auto!\" />\n              <div className=\"text-muted-foreground p-1.5 text-xs\">\n                Codespace usage for this repository is paid for by{\" \"}\n                <span className=\"font-medium\">shadcn</span>.\n              </div>\n            </TabsContent>\n            <TabsContent value=\"local\">\n              <Item size=\"sm\" className=\"hidden p-0\">\n                <ItemContent>\n                  <ItemTitle className=\"gap-2\">\n                    <IconPlaceholder\n                      lucide=\"TerminalIcon\"\n                      tabler=\"IconTerminal\"\n                      hugeicons=\"ComputerTerminal01Icon\"\n                      phosphor=\"TerminalIcon\"\n                      remixicon=\"RiTerminalBoxLine\"\n                      className=\"size-4\"\n                    />\n                    Clone\n                  </ItemTitle>\n                </ItemContent>\n                <ItemActions>\n                  <Tooltip>\n                    <TooltipTrigger\n                      render={<Button variant=\"ghost\" size=\"icon\" />}\n                    >\n                      <IconPlaceholder\n                        lucide=\"InfoIcon\"\n                        tabler=\"IconInfoCircle\"\n                        hugeicons=\"AlertCircleIcon\"\n                        phosphor=\"InfoIcon\"\n                        remixicon=\"RiInformationLine\"\n                      />\n                    </TooltipTrigger>\n                    <TooltipContent side=\"left\">\n                      Which remote URL should I use?\n                    </TooltipContent>\n                  </Tooltip>\n                </ItemActions>\n              </Item>\n              <Tabs defaultValue=\"https\">\n                <TabsList\n                  variant=\"line\"\n                  className=\"w-full justify-start border-b *:[button]:flex-0\"\n                >\n                  <TabsTrigger value=\"https\">HTTPS</TabsTrigger>\n                  <TabsTrigger value=\"ssh\">SSH</TabsTrigger>\n                  <TabsTrigger value=\"cli\">GitHub CLI</TabsTrigger>\n                </TabsList>\n                <div className=\"bg-muted/30 rounded-md border p-2\">\n                  <TabsContent value=\"https\">\n                    <Field className=\"gap-2\">\n                      <FieldLabel htmlFor=\"https-url\" className=\"sr-only\">\n                        HTTPS URL\n                      </FieldLabel>\n                      <InputGroup>\n                        <InputGroupAddon align=\"inline-end\">\n                          <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                              phosphor=\"CopyIcon\"\n                              remixicon=\"RiFileCopyLine\"\n                            />\n                          </InputGroupButton>\n                        </InputGroupAddon>\n                        <InputGroupInput\n                          id=\"https-url\"\n                          defaultValue=\"https://github.com/shadcn-ui/ui.git\"\n                          readOnly\n                        />\n                      </InputGroup>\n                      <FieldDescription>\n                        Clone using the web URL.\n                      </FieldDescription>\n                    </Field>\n                  </TabsContent>\n                  <TabsContent value=\"ssh\">\n                    <Field className=\"gap-2\">\n                      <FieldLabel htmlFor=\"ssh-url\" className=\"sr-only\">\n                        SSH URL\n                      </FieldLabel>\n                      <InputGroup>\n                        <InputGroupAddon align=\"inline-end\">\n                          <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                              phosphor=\"CopyIcon\"\n                              remixicon=\"RiFileCopyLine\"\n                            />\n                          </InputGroupButton>\n                        </InputGroupAddon>\n                        <InputGroupInput\n                          id=\"ssh-url\"\n                          defaultValue=\"git@github.com:shadcn-ui/ui.git\"\n                          readOnly\n                        />\n                      </InputGroup>\n                      <FieldDescription>\n                        Use a password-protected SSH key.\n                      </FieldDescription>\n                    </Field>\n                  </TabsContent>\n                  <TabsContent value=\"cli\">\n                    <Field className=\"gap-2\">\n                      <FieldLabel htmlFor=\"cli-command\" className=\"sr-only\">\n                        CLI Command\n                      </FieldLabel>\n                      <InputGroup>\n                        <InputGroupAddon align=\"inline-end\">\n                          <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                              phosphor=\"CopyIcon\"\n                              remixicon=\"RiFileCopyLine\"\n                            />\n                          </InputGroupButton>\n                        </InputGroupAddon>\n                        <InputGroupInput\n                          id=\"cli-command\"\n                          defaultValue=\"gh repo clone shadcn-ui/ui\"\n                          readOnly\n                        />\n                      </InputGroup>\n                      <FieldDescription>\n                        Work fast with our official CLI.{\" \"}\n                        <a href=\"#learn-more\">Learn more</a>\n                      </FieldDescription>\n                    </Field>\n                  </TabsContent>\n                </div>\n              </Tabs>\n              <Separator className=\"-mx-2 my-2 w-auto!\" />\n              <div className=\"flex flex-col\">\n                <Button\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  className=\"justify-start gap-1.5\"\n                >\n                  <IconPlaceholder\n                    lucide=\"MonitorIcon\"\n                    tabler=\"IconDeviceDesktop\"\n                    hugeicons=\"ComputerIcon\"\n                    phosphor=\"MonitorIcon\"\n                    remixicon=\"RiComputerLine\"\n                    data-icon=\"inline-start\"\n                  />\n                  Open with GitHub Desktop\n                </Button>\n                <Button\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  className=\"justify-start gap-1.5\"\n                >\n                  <IconPlaceholder\n                    lucide=\"DownloadIcon\"\n                    tabler=\"IconDownload\"\n                    hugeicons=\"DownloadIcon\"\n                    phosphor=\"DownloadIcon\"\n                    remixicon=\"RiDownloadLine\"\n                    data-icon=\"inline-start\"\n                  />\n                  Download ZIP\n                </Button>\n              </div>\n            </TabsContent>\n          </Tabs>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\nfunction RepositoryToolbar() {\n  const [selectedBranch, setSelectedBranch] = React.useState(\"main\")\n  return (\n    <Example title=\"Repository Toolbar\">\n      <div className=\"flex items-center gap-2\">\n        <InputGroup>\n          <InputGroupInput placeholder=\"Go to file\" />\n          <InputGroupAddon align=\"inline-start\">\n            <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n              <IconPlaceholder\n                lucide=\"SearchIcon\"\n                tabler=\"IconSearch\"\n                hugeicons=\"SearchIcon\"\n                phosphor=\"MagnifyingGlassIcon\"\n                remixicon=\"RiSearchLine\"\n              />\n            </InputGroupButton>\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">\n            <Kbd>t</Kbd>\n          </InputGroupAddon>\n        </InputGroup>\n        <DropdownMenu>\n          <DropdownMenuTrigger render={<Button variant=\"outline\" />}>\n            Add File\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDown01Icon\"\n              phosphor=\"CaretDownIcon\"\n              remixicon=\"RiArrowDownSLine\"\n              data-icon=\"inline-end\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"PlusIcon\"\n                  tabler=\"IconPlus\"\n                  hugeicons=\"PlusSignIcon\"\n                  phosphor=\"PlusIcon\"\n                  remixicon=\"RiAddLine\"\n                />\n                Create new file\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"UploadIcon\"\n                  hugeicons=\"Upload01Icon\"\n                  tabler=\"IconUpload\"\n                  phosphor=\"UploadIcon\"\n                  remixicon=\"RiUploadLine\"\n                />\n                Upload files\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <Popover>\n          <Tooltip>\n            <TooltipTrigger\n              render={\n                <PopoverTrigger\n                  render={<Button variant=\"outline\" size=\"icon\" />}\n                />\n              }\n            >\n              <IconPlaceholder\n                lucide=\"CloudCogIcon\"\n                hugeicons=\"AiCloud01Icon\"\n                tabler=\"IconCloudCog\"\n                phosphor=\"CloudArrowUpIcon\"\n                remixicon=\"RiUploadCloudLine\"\n              />\n            </TooltipTrigger>\n            <TooltipContent>New Agent Task</TooltipContent>\n          </Tooltip>\n          <PopoverContent side=\"bottom\" align=\"end\" className=\"w-96\">\n            <Field>\n              <FieldLabel htmlFor=\"new-agent-task\">New Agent Task</FieldLabel>\n              <InputGroup>\n                <InputGroupTextarea placeholder=\"Describe your task in natural language.\"></InputGroupTextarea>\n                <InputGroupAddon align=\"block-end\">\n                  <Popover>\n                    <Tooltip>\n                      <PopoverTrigger\n                        render={\n                          <TooltipTrigger\n                            render={\n                              <InputGroupButton\n                                variant=\"outline\"\n                                size=\"icon-sm\"\n                              />\n                            }\n                          />\n                        }\n                      >\n                        <IconPlaceholder\n                          lucide=\"GitBranchIcon\"\n                          hugeicons=\"GitBranchIcon\"\n                          tabler=\"IconGitBranch\"\n                          phosphor=\"GitBranchIcon\"\n                          remixicon=\"RiGitBranchLine\"\n                        />\n                      </PopoverTrigger>\n                      <TooltipContent>Select a branch</TooltipContent>\n                    </Tooltip>\n                    <PopoverContent side=\"bottom\" align=\"start\" className=\"p-1\">\n                      <Field>\n                        <FieldLabel htmlFor=\"select-branch\" className=\"sr-only\">\n                          Select a Branch\n                        </FieldLabel>\n                        <Command>\n                          <CommandInput\n                            id=\"select-branch\"\n                            placeholder=\"Find a branch\"\n                          />\n                          <CommandEmpty>No branches found</CommandEmpty>\n                          <CommandList>\n                            <CommandGroup>\n                              {[\n                                \"main\",\n                                \"develop\",\n                                \"feature/123\",\n                                \"feature/user-authentication\",\n                                \"feature/dashboard-redesign\",\n                                \"bugfix/login-error\",\n                                \"hotfix/security-patch\",\n                                \"release/v2.0.0\",\n                                \"feature/api-integration\",\n                                \"bugfix/memory-leak\",\n                                \"feature/dark-mode\",\n                                \"feature/responsive-design\",\n                                \"bugfix/typo-fix\",\n                                \"feature/search-functionality\",\n                                \"release/v1.9.0\",\n                                \"feature/notifications\",\n                                \"bugfix/cache-issue\",\n                                \"feature/payment-gateway\",\n                                \"hotfix/critical-bug\",\n                                \"feature/admin-panel\",\n                                \"bugfix/validation-error\",\n                                \"feature/analytics\",\n                                \"release/v2.1.0\",\n                              ].map((branch) => (\n                                <CommandItem\n                                  key={branch}\n                                  value={branch}\n                                  onSelect={() => setSelectedBranch(branch)}\n                                  data-checked={selectedBranch === branch}\n                                >\n                                  {branch}\n                                </CommandItem>\n                              ))}\n                            </CommandGroup>\n                          </CommandList>\n                        </Command>\n                      </Field>\n                    </PopoverContent>\n                  </Popover>\n                  <Popover>\n                    <Tooltip>\n                      <PopoverTrigger\n                        render={\n                          <TooltipTrigger\n                            render={\n                              <InputGroupButton\n                                variant=\"outline\"\n                                size=\"icon-sm\"\n                              />\n                            }\n                          />\n                        }\n                      >\n                        <IconPlaceholder\n                          lucide=\"BotIcon\"\n                          hugeicons=\"RoboticIcon\"\n                          tabler=\"IconRobot\"\n                          phosphor=\"RobotIcon\"\n                          remixicon=\"RiRobotLine\"\n                        />\n                      </PopoverTrigger>\n                      <TooltipContent>Select Agent</TooltipContent>\n                    </Tooltip>\n                    <PopoverContent side=\"bottom\" align=\"start\">\n                      <Empty className=\"gap-4 p-0\">\n                        <EmptyHeader>\n                          <EmptyTitle className=\"text-sm\">\n                            This repository has no custom agents\n                          </EmptyTitle>\n                          <EmptyDescription className=\"text-xs\">\n                            Custom agents are reusable instructions and tools in\n                            your repository.\n                          </EmptyDescription>\n                        </EmptyHeader>\n                        <EmptyContent>\n                          <Button variant=\"outline\" size=\"sm\">\n                            Create Custom Agent\n                          </Button>\n                        </EmptyContent>\n                      </Empty>\n                    </PopoverContent>\n                  </Popover>\n                  <Tooltip>\n                    <TooltipTrigger\n                      render={\n                        <InputGroupButton\n                          variant=\"ghost\"\n                          size=\"icon-sm\"\n                          className=\"ml-auto\"\n                        />\n                      }\n                    >\n                      <IconPlaceholder\n                        lucide=\"SendIcon\"\n                        hugeicons=\"SentIcon\"\n                        tabler=\"IconSend\"\n                        phosphor=\"PaperPlaneTiltIcon\"\n                        remixicon=\"RiSendPlaneLine\"\n                      />\n                    </TooltipTrigger>\n                    <TooltipContent className=\"flex items-center gap-2 pr-2\">\n                      Start Task <Kbd>⏎</Kbd>\n                    </TooltipContent>\n                  </Tooltip>\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n          </PopoverContent>\n        </Popover>\n      </div>\n    </Example>\n  )\n}\nfunction Navbar() {\n  return (\n    <Example title=\"Account Menu\">\n      <header className=\"flex h-14 w-full items-center gap-2\">\n        <Drawer direction=\"left\">\n          <DrawerTrigger asChild>\n            <Button variant=\"outline\" size=\"icon\">\n              <IconPlaceholder\n                lucide=\"MenuIcon\"\n                hugeicons=\"Menu09Icon\"\n                tabler=\"IconMenu\"\n                phosphor=\"ListIcon\"\n                remixicon=\"RiListUnordered\"\n              />\n              <span className=\"sr-only\">Open menu</span>\n            </Button>\n          </DrawerTrigger>\n          <DrawerContent className=\"max-w-72\">\n            <DrawerHeader className=\"flex flex-row items-center justify-between px-5 pb-0\">\n              <DrawerTitle>Menu</DrawerTitle>\n              <DrawerClose asChild>\n                <Button variant=\"ghost\" size=\"icon-sm\">\n                  <IconPlaceholder\n                    lucide=\"XIcon\"\n                    tabler=\"IconX\"\n                    hugeicons=\"Cancel01Icon\"\n                    phosphor=\"XIcon\"\n                    remixicon=\"RiCloseLine\"\n                  />\n                  <span className=\"sr-only\">Close</span>\n                </Button>\n              </DrawerClose>\n            </DrawerHeader>\n            <div className=\"p-2\">\n              <ItemGroup className=\"gap-px\">\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"HomeIcon\"\n                      tabler=\"IconHome\"\n                      hugeicons=\"HomeIcon\"\n                      phosphor=\"HouseIcon\"\n                      remixicon=\"RiHomeLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Home</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"CircleIcon\"\n                      tabler=\"IconCircle\"\n                      hugeicons=\"CircleIcon\"\n                      phosphor=\"CircleIcon\"\n                      remixicon=\"RiCircleLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Issues</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"GitBranchIcon\"\n                      tabler=\"IconGitBranch\"\n                      hugeicons=\"GitBranchIcon\"\n                      phosphor=\"GitBranchIcon\"\n                      remixicon=\"RiGitBranchLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Pull requests</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"LayoutGridIcon\"\n                      tabler=\"IconLayoutGrid\"\n                      hugeicons=\"GridIcon\"\n                      phosphor=\"GridFourIcon\"\n                      remixicon=\"RiGridLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Projects</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"MailIcon\"\n                      tabler=\"IconMail\"\n                      hugeicons=\"MailIcon\"\n                      phosphor=\"EnvelopeIcon\"\n                      remixicon=\"RiMailLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Discussions</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"ServerIcon\"\n                      tabler=\"IconServer\"\n                      hugeicons=\"ServerStackIcon\"\n                      phosphor=\"HardDrivesIcon\"\n                      remixicon=\"RiHardDriveLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Codespaces</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"BotIcon\"\n                      tabler=\"IconRobot\"\n                      hugeicons=\"RoboticIcon\"\n                      phosphor=\"RobotIcon\"\n                      remixicon=\"RiRobotLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Copilot</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"SparklesIcon\"\n                      tabler=\"IconSparkles\"\n                      hugeicons=\"SparklesIcon\"\n                      phosphor=\"SparkleIcon\"\n                      remixicon=\"RiSparklingLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Spark</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <ItemSeparator />\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"SearchIcon\"\n                      tabler=\"IconSearch\"\n                      hugeicons=\"SearchIcon\"\n                      phosphor=\"MagnifyingGlassIcon\"\n                      remixicon=\"RiSearchLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Explore</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"ShoppingBagIcon\"\n                      tabler=\"IconShoppingBag\"\n                      hugeicons=\"ShoppingBasket01Icon\"\n                      phosphor=\"BagIcon\"\n                      remixicon=\"RiShoppingBagLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Marketplace</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"LinkIcon\"\n                      tabler=\"IconLink\"\n                      hugeicons=\"LinkIcon\"\n                      phosphor=\"LinkIcon\"\n                      remixicon=\"RiLinksLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>MCP registry</ItemTitle>\n                  </ItemContent>\n                </Item>\n              </ItemGroup>\n            </div>\n          </DrawerContent>\n        </Drawer>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <Button\n                variant=\"ghost\"\n                size=\"icon\"\n                className=\"ml-auto rounded-full\"\n              />\n            }\n          >\n            <Avatar>\n              <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"shadcn\" />\n              <AvatarFallback>SC</AvatarFallback>\n            </Avatar>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-56\" align=\"end\">\n            <DropdownMenuGroup>\n              <DropdownMenuLabel className=\"p-0 font-normal\">\n                <Item className=\"px-2 py-1 pb-0.5\" size=\"sm\">\n                  <ItemMedia>\n                    <Avatar>\n                      <AvatarImage\n                        src=\"https://github.com/shadcn.png\"\n                        alt=\"shadcn\"\n                      />\n                      <AvatarFallback>SC</AvatarFallback>\n                    </Avatar>\n                  </ItemMedia>\n                  <ItemContent className=\"gap-0\">\n                    <ItemTitle className=\"text-foreground text-sm\">\n                      shadcn\n                    </ItemTitle>\n                    <ItemDescription className=\"text-xs\">\n                      shadcn@example.com\n                    </ItemDescription>\n                  </ItemContent>\n                </Item>\n              </DropdownMenuLabel>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SmileIcon\"\n                  tabler=\"IconMoodSmile\"\n                  hugeicons=\"SmileIcon\"\n                  phosphor=\"SmileyIcon\"\n                  remixicon=\"RiEmotionLine\"\n                />\n                Set status\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CircleAlertIcon\"\n                  tabler=\"IconExclamationCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                  phosphor=\"WarningCircleIcon\"\n                  remixicon=\"RiErrorWarningLine\"\n                />\n                Single sign-on\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"UserIcon\"\n                  tabler=\"IconUser\"\n                  hugeicons=\"UserIcon\"\n                  phosphor=\"UserIcon\"\n                  remixicon=\"RiUserLine\"\n                />\n                Profile\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"FolderIcon\"\n                  tabler=\"IconFolder\"\n                  hugeicons=\"FolderIcon\"\n                  phosphor=\"FolderIcon\"\n                  remixicon=\"RiFolderLine\"\n                />\n                Repositories\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"StarIcon\"\n                  tabler=\"IconStar\"\n                  hugeicons=\"StarIcon\"\n                  phosphor=\"StarIcon\"\n                  remixicon=\"RiStarLine\"\n                />\n                Stars\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CodeIcon\"\n                  tabler=\"IconCode\"\n                  hugeicons=\"CodeIcon\"\n                  phosphor=\"CodeIcon\"\n                  remixicon=\"RiCodeLine\"\n                />\n                Gists\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"FolderIcon\"\n                  tabler=\"IconFolder\"\n                  hugeicons=\"FolderIcon\"\n                  phosphor=\"FolderIcon\"\n                  remixicon=\"RiFolderLine\"\n                />\n                Organizations\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"ServerIcon\"\n                  tabler=\"IconServer\"\n                  hugeicons=\"ServerStackIcon\"\n                  phosphor=\"HardDrivesIcon\"\n                  remixicon=\"RiHardDriveLine\"\n                />\n                Enterprises\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"HeartIcon\"\n                  tabler=\"IconHeart\"\n                  hugeicons=\"FavouriteIcon\"\n                  phosphor=\"HeartIcon\"\n                  remixicon=\"RiHeartLine\"\n                />\n                Sponsors\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SettingsIcon\"\n                  tabler=\"IconSettings\"\n                  hugeicons=\"SettingsIcon\"\n                  phosphor=\"GearIcon\"\n                  remixicon=\"RiSettingsLine\"\n                />\n                Settings\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"BotIcon\"\n                  tabler=\"IconRobot\"\n                  hugeicons=\"RoboticIcon\"\n                  phosphor=\"RobotIcon\"\n                  remixicon=\"RiRobotLine\"\n                />\n                Copilot settings\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SparklesIcon\"\n                  tabler=\"IconSparkles\"\n                  hugeicons=\"SparklesIcon\"\n                  phosphor=\"SparkleIcon\"\n                  remixicon=\"RiSparklingLine\"\n                />\n                Feature preview\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"MonitorIcon\"\n                  tabler=\"IconDeviceDesktop\"\n                  hugeicons=\"ComputerIcon\"\n                  phosphor=\"MonitorIcon\"\n                  remixicon=\"RiComputerLine\"\n                />\n                Appearance\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"UserIcon\"\n                  tabler=\"IconUser\"\n                  hugeicons=\"UserIcon\"\n                  phosphor=\"UserIcon\"\n                  remixicon=\"RiUserLine\"\n                />\n                Accessibility\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUpIcon\"\n                  phosphor=\"ArrowUpIcon\"\n                  remixicon=\"RiArrowUpLine\"\n                />\n                Upgrade\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"LogOutIcon\"\n                  tabler=\"IconLogout\"\n                  hugeicons=\"LogoutIcon\"\n                  phosphor=\"SignOutIcon\"\n                  remixicon=\"RiLogoutBoxLine\"\n                />\n                Sign out\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </header>\n    </Example>\n  )\n}\nconst usernames = [\n  \"shadcn\",\n  \"vercel\",\n  \"nextjs\",\n  \"tailwindlabs\",\n  \"typescript-lang\",\n  \"eslint\",\n  \"prettier\",\n  \"babel\",\n  \"webpack\",\n  \"rollup\",\n  \"parcel\",\n  \"vite\",\n  \"react\",\n  \"vue\",\n  \"angular\",\n  \"solid\",\n]\nfunction Contributors() {\n  return (\n    <Example title=\"Contributors\" className=\"items-center lg:p-16\">\n      <Card className=\"max-w-sm\">\n        <CardHeader>\n          <CardTitle>\n            Contributors <Badge variant=\"secondary\">312</Badge>\n          </CardTitle>\n        </CardHeader>\n        <CardContent>\n          <div className=\"flex flex-wrap gap-2\">\n            {usernames.map((username) => (\n              <Avatar key={username}>\n                <AvatarImage\n                  src={`https://github.com/${username}.png`}\n                  alt={username}\n                />\n                <AvatarFallback>{username.charAt(0)}</AvatarFallback>\n              </Avatar>\n            ))}\n          </div>\n        </CardContent>\n        <CardFooter>\n          <a href=\"#\" className=\"text-sm underline underline-offset-4\">\n            + 810 contributors\n          </a>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\nfunction Profile() {\n  return (\n    <Example title=\"Profile\" className=\"items-center justify-center\">\n      <Card className=\"mx-auto w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>Profile</CardTitle>\n          <CardDescription>Manage your profile information.</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form id=\"profile\">\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"name\">Name</FieldLabel>\n                <Input id=\"name\" placeholder=\"shadcn\" />\n                <FieldDescription>\n                  Your name may appear around GitHub where you contribute or are\n                  mentioned. You can remove it at any time.\n                </FieldDescription>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"email\">Public Email</FieldLabel>\n                <NativeSelect id=\"email\">\n                  <NativeSelectOption value=\"m@shadcn.com\">\n                    m@shadcn.com\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"m@gmail.com\">\n                    m@gmail.com\n                  </NativeSelectOption>\n                </NativeSelect>\n                <FieldDescription>\n                  You can manage verified email addresses in your{\" \"}\n                  <a href=\"#email-settings\">email settings</a>.\n                </FieldDescription>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"bio\">Bio</FieldLabel>\n                <Textarea\n                  id=\"bio\"\n                  placeholder=\"Tell us a little bit about yourself\"\n                />\n                <FieldDescription>\n                  You can <span>@mention</span> other users and organizations to\n                  link to them.\n                </FieldDescription>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button form=\"profile\">Save Profile</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\nfunction ContributionsActivity() {\n  return (\n    <Example title=\"Contributions Activity\" className=\"justify-center\">\n      <Card className=\"mx-auto w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>Contributions & Activity</CardTitle>\n          <CardDescription>\n            Manage your contributions and activity visibility.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form id=\"contributions-activity\">\n            <FieldGroup>\n              <FieldSet>\n                <FieldLegend className=\"sr-only\">\n                  Contributions & activity\n                </FieldLegend>\n                <FieldGroup className=\"gap-3\">\n                  <Field orientation=\"horizontal\">\n                    <Checkbox id=\"private-profile\" />\n                    <FieldContent>\n                      <FieldLabel\n                        htmlFor=\"private-profile\"\n                        className=\"font-normal\"\n                      >\n                        Make profile private and hide activity\n                      </FieldLabel>\n                      <FieldDescription>\n                        Enabling this will hide your contributions and activity\n                        from your GitHub profile and from social features like\n                        followers, stars, feeds, leaderboards and releases.\n                      </FieldDescription>\n                    </FieldContent>\n                  </Field>\n                  <Field orientation=\"horizontal\">\n                    <Checkbox id=\"private-contributions\" defaultChecked />\n                    <FieldContent>\n                      <FieldLabel\n                        htmlFor=\"private-contributions\"\n                        className=\"font-normal\"\n                      >\n                        Include private contributions on my profile\n                      </FieldLabel>\n                      <FieldDescription>\n                        Your contribution graph, achievements, and activity\n                        overview will show your private contributions without\n                        revealing any repository or organization information.{\" \"}\n                        <a href=\"#read-more\">Read more</a>.\n                      </FieldDescription>\n                    </FieldContent>\n                  </Field>\n                </FieldGroup>\n              </FieldSet>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button form=\"contributions-activity\">Save Changes</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\nconst users = [\n  \"shadcn\",\n  \"maxleiter\",\n  \"evilrabbit\",\n  \"pranathip\",\n  \"jorgezreik\",\n  \"shuding\",\n  \"rauchg\",\n]\nfunction AssignIssue() {\n  const anchor = useComboboxAnchor()\n  return (\n    <Example title=\"User Select\" className=\"items-center justify-center\">\n      <Card className=\"w-full max-w-sm\" size=\"sm\">\n        <CardHeader className=\"border-b\">\n          <CardTitle className=\"text-sm\">Assign Issue</CardTitle>\n          <CardDescription className=\"text-sm\">\n            Select users to assign to this issue.\n          </CardDescription>\n          <CardAction>\n            <Tooltip>\n              <TooltipTrigger\n                render={<Button variant=\"outline\" size=\"icon-xs\" />}\n              >\n                <IconPlaceholder\n                  lucide=\"PlusIcon\"\n                  tabler=\"IconPlus\"\n                  hugeicons=\"PlusSignIcon\"\n                  phosphor=\"PlusIcon\"\n                  remixicon=\"RiAddLine\"\n                />\n              </TooltipTrigger>\n              <TooltipContent>Add user</TooltipContent>\n            </Tooltip>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <Combobox\n            multiple\n            autoHighlight\n            items={users}\n            defaultValue={[users[0]]}\n          >\n            <ComboboxChips ref={anchor}>\n              <ComboboxValue>\n                {(values) => (\n                  <React.Fragment>\n                    {values.map((username: string) => (\n                      <ComboboxChip key={username}>\n                        <Avatar className=\"size-4\">\n                          <AvatarImage\n                            src={`https://github.com/${username}.png`}\n                            alt={username}\n                          />\n                          <AvatarFallback>{username.charAt(0)}</AvatarFallback>\n                        </Avatar>\n                        {username}\n                      </ComboboxChip>\n                    ))}\n                    <ComboboxChipsInput\n                      placeholder={\n                        values.length > 0 ? undefined : \"Select a item...\"\n                      }\n                    />\n                  </React.Fragment>\n                )}\n              </ComboboxValue>\n            </ComboboxChips>\n            <ComboboxContent anchor={anchor}>\n              <ComboboxEmpty>No users found.</ComboboxEmpty>\n              <ComboboxList>\n                {(username) => (\n                  <ComboboxItem key={username} value={username}>\n                    <Avatar className=\"size-5\">\n                      <AvatarImage\n                        src={`https://github.com/${username}.png`}\n                        alt={username}\n                      />\n                      <AvatarFallback>{username.charAt(0)}</AvatarFallback>\n                    </Avatar>\n                    {username}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/github.json b/apps/v4/public/r/styles/base-mira/github.json
index c44ddc3794..822a0cb95e 100644
--- a/apps/v4/public/r/styles/base-mira/github.json
+++ b/apps/v4/public/r/styles/base-mira/github.json
@@ -30,7 +30,7 @@
   "files": [
     {
       "path": "registry/base-mira/blocks/github.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-mira/components/example\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/base-mira/ui/avatar\"\nimport { Badge } from \"@/registry/base-mira/ui/badge\"\nimport { Button } from \"@/registry/base-mira/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-mira/ui/card\"\nimport { Checkbox } from \"@/registry/base-mira/ui/checkbox\"\nimport {\n  Combobox,\n  ComboboxChip,\n  ComboboxChips,\n  ComboboxChipsInput,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxItem,\n  ComboboxList,\n  ComboboxValue,\n  useComboboxAnchor,\n} from \"@/registry/base-mira/ui/combobox\"\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"@/registry/base-mira/ui/command\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/base-mira/ui/drawer\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-mira/ui/dropdown-menu\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/base-mira/ui/empty\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n} from \"@/registry/base-mira/ui/field\"\nimport { Input } from \"@/registry/base-mira/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupTextarea,\n} from \"@/registry/base-mira/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemGroup,\n  ItemMedia,\n  ItemSeparator,\n  ItemTitle,\n} from \"@/registry/base-mira/ui/item\"\nimport { Kbd } from \"@/registry/base-mira/ui/kbd\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/base-mira/ui/native-select\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/base-mira/ui/popover\"\nimport { Separator } from \"@/registry/base-mira/ui/separator\"\nimport { Spinner } from \"@/registry/base-mira/ui/spinner\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/base-mira/ui/tabs\"\nimport { Textarea } from \"@/registry/base-mira/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/base-mira/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function GithubBlock() {\n  return (\n    <ExampleWrapper>\n      <CodespacesCard />\n      <AssignIssue />\n      <Navbar />\n      <RepositoryToolbar />\n      <Profile />\n      <ContributionsActivity />\n      <Contributors />\n    </ExampleWrapper>\n  )\n}\nfunction CodespacesCard() {\n  const [isCreatingCodespace, setIsCreatingCodespace] = React.useState(false)\n  return (\n    <Example title=\"Codespaces\" className=\"min-h-[550px] lg:p-12\">\n      <Card className=\"mx-auto w-full max-w-sm\" size=\"sm\">\n        <CardContent>\n          <Tabs defaultValue=\"codespaces\">\n            <TabsList className=\"w-full\">\n              <TabsTrigger value=\"codespaces\">Codespaces</TabsTrigger>\n              <TabsTrigger value=\"local\">Local</TabsTrigger>\n            </TabsList>\n            <TabsContent value=\"codespaces\">\n              <Item size=\"sm\" className=\"px-1 pt-2\">\n                <ItemContent>\n                  <ItemTitle>Codespaces</ItemTitle>\n                  <ItemDescription>\n                    Your workspaces in the cloud\n                  </ItemDescription>\n                </ItemContent>\n                <ItemActions>\n                  <Tooltip>\n                    <TooltipTrigger\n                      render={<Button variant=\"ghost\" size=\"icon-sm\" />}\n                    >\n                      <IconPlaceholder\n                        lucide=\"PlusIcon\"\n                        tabler=\"IconPlus\"\n                        hugeicons=\"PlusSignIcon\"\n                        phosphor=\"PlusIcon\"\n                        remixicon=\"RiAddLine\"\n                      />\n                    </TooltipTrigger>\n                    <TooltipContent side=\"bottom\">\n                      Create a codespace on main\n                    </TooltipContent>\n                  </Tooltip>\n                  <DropdownMenu>\n                    <Tooltip>\n                      <TooltipTrigger\n                        render={\n                          <DropdownMenuTrigger\n                            render={<Button variant=\"ghost\" size=\"icon-sm\" />}\n                          />\n                        }\n                      >\n                        <IconPlaceholder\n                          lucide=\"MoreHorizontalIcon\"\n                          tabler=\"IconDots\"\n                          hugeicons=\"MoreHorizontalCircle01Icon\"\n                          phosphor=\"DotsThreeOutlineIcon\"\n                          remixicon=\"RiMoreLine\"\n                        />\n                      </TooltipTrigger>\n                      <TooltipContent side=\"bottom\">\n                        Codespace repository configuration\n                      </TooltipContent>\n                    </Tooltip>\n                    <DropdownMenuContent align=\"end\" className=\"w-56\">\n                      <DropdownMenuGroup>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"PlusIcon\"\n                            tabler=\"IconPlus\"\n                            hugeicons=\"PlusSignIcon\"\n                            phosphor=\"PlusIcon\"\n                            remixicon=\"RiAddLine\"\n                          />\n                          New with options...\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"ContainerIcon\"\n                            tabler=\"IconBox\"\n                            hugeicons=\"CubeIcon\"\n                            phosphor=\"CubeIcon\"\n                            remixicon=\"RiBox1Line\"\n                          />\n                          Configure dev container\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"ZapIcon\"\n                            tabler=\"IconBolt\"\n                            hugeicons=\"ZapIcon\"\n                            phosphor=\"LightningIcon\"\n                            remixicon=\"RiFlashlightLine\"\n                          />\n                          Set up prebuilds\n                        </DropdownMenuItem>\n                      </DropdownMenuGroup>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuGroup>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"ServerIcon\"\n                            tabler=\"IconServer\"\n                            hugeicons=\"ServerStackIcon\"\n                            phosphor=\"HardDrivesIcon\"\n                            remixicon=\"RiHardDriveLine\"\n                          />\n                          Manage codespaces\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"ShareIcon\"\n                            tabler=\"IconShare2\"\n                            hugeicons=\"Share03Icon\"\n                            phosphor=\"ShareIcon\"\n                            remixicon=\"RiShareLine\"\n                          />\n                          Share deep link\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"InfoIcon\"\n                            tabler=\"IconInfoCircle\"\n                            hugeicons=\"AlertCircleIcon\"\n                            phosphor=\"InfoIcon\"\n                            remixicon=\"RiInformationLine\"\n                          />\n                          What are codespaces?\n                        </DropdownMenuItem>\n                      </DropdownMenuGroup>\n                    </DropdownMenuContent>\n                  </DropdownMenu>\n                </ItemActions>\n              </Item>\n              <Separator className=\"-mx-2 my-2 w-auto!\" />\n              <Empty className=\"p-4\">\n                <EmptyHeader>\n                  <EmptyMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"ServerIcon\"\n                      tabler=\"IconServer\"\n                      hugeicons=\"ServerStackIcon\"\n                      phosphor=\"HardDrivesIcon\"\n                      remixicon=\"RiHardDriveLine\"\n                    />\n                  </EmptyMedia>\n                  <EmptyTitle>No codespaces</EmptyTitle>\n                  <EmptyDescription>\n                    You don&apos;t have any codespaces with this repository\n                    checked out\n                  </EmptyDescription>\n                </EmptyHeader>\n                <EmptyContent>\n                  <Button\n                    size=\"sm\"\n                    onClick={() => {\n                      setIsCreatingCodespace(true)\n                      setTimeout(() => {\n                        setIsCreatingCodespace(false)\n                      }, 2000)\n                    }}\n                    disabled={isCreatingCodespace}\n                  >\n                    {isCreatingCodespace ? (\n                      <Spinner data-icon=\"inline-start\" />\n                    ) : (\n                      \"\"\n                    )}\n                    Create Codespace\n                  </Button>\n                  <a\n                    href=\"#learn-more\"\n                    className=\"text-muted-foreground text-xs underline underline-offset-4\"\n                  >\n                    Learn more about codespaces\n                  </a>\n                </EmptyContent>\n              </Empty>\n              <Separator className=\"-mx-2 my-2 w-auto!\" />\n              <div className=\"text-muted-foreground p-1.5 text-xs\">\n                Codespace usage for this repository is paid for by{\" \"}\n                <span className=\"font-medium\">shadcn</span>.\n              </div>\n            </TabsContent>\n            <TabsContent value=\"local\">\n              <Item size=\"sm\" className=\"hidden p-0\">\n                <ItemContent>\n                  <ItemTitle className=\"gap-2\">\n                    <IconPlaceholder\n                      lucide=\"TerminalIcon\"\n                      tabler=\"IconTerminal\"\n                      hugeicons=\"ComputerTerminal01Icon\"\n                      phosphor=\"TerminalIcon\"\n                      remixicon=\"RiTerminalBoxLine\"\n                      className=\"size-4\"\n                    />\n                    Clone\n                  </ItemTitle>\n                </ItemContent>\n                <ItemActions>\n                  <Tooltip>\n                    <TooltipTrigger\n                      render={<Button variant=\"ghost\" size=\"icon\" />}\n                    >\n                      <IconPlaceholder\n                        lucide=\"InfoIcon\"\n                        tabler=\"IconInfoCircle\"\n                        hugeicons=\"AlertCircleIcon\"\n                        phosphor=\"InfoIcon\"\n                        remixicon=\"RiInformationLine\"\n                      />\n                    </TooltipTrigger>\n                    <TooltipContent side=\"left\">\n                      Which remote URL should I use?\n                    </TooltipContent>\n                  </Tooltip>\n                </ItemActions>\n              </Item>\n              <Tabs defaultValue=\"https\">\n                <TabsList\n                  variant=\"line\"\n                  className=\"w-full justify-start border-b *:[button]:flex-0\"\n                >\n                  <TabsTrigger value=\"https\">HTTPS</TabsTrigger>\n                  <TabsTrigger value=\"ssh\">SSH</TabsTrigger>\n                  <TabsTrigger value=\"cli\">GitHub CLI</TabsTrigger>\n                </TabsList>\n                <div className=\"bg-muted/30 rounded-md border p-2\">\n                  <TabsContent value=\"https\">\n                    <Field className=\"gap-2\">\n                      <FieldLabel htmlFor=\"https-url\" className=\"sr-only\">\n                        HTTPS URL\n                      </FieldLabel>\n                      <InputGroup>\n                        <InputGroupAddon align=\"inline-end\">\n                          <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                              phosphor=\"CopyIcon\"\n                              remixicon=\"RiFileCopyLine\"\n                            />\n                          </InputGroupButton>\n                        </InputGroupAddon>\n                        <InputGroupInput\n                          id=\"https-url\"\n                          defaultValue=\"https://github.com/shadcn-ui/ui.git\"\n                          readOnly\n                        />\n                      </InputGroup>\n                      <FieldDescription>\n                        Clone using the web URL.\n                      </FieldDescription>\n                    </Field>\n                  </TabsContent>\n                  <TabsContent value=\"ssh\">\n                    <Field className=\"gap-2\">\n                      <FieldLabel htmlFor=\"ssh-url\" className=\"sr-only\">\n                        SSH URL\n                      </FieldLabel>\n                      <InputGroup>\n                        <InputGroupAddon align=\"inline-end\">\n                          <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                              phosphor=\"CopyIcon\"\n                              remixicon=\"RiFileCopyLine\"\n                            />\n                          </InputGroupButton>\n                        </InputGroupAddon>\n                        <InputGroupInput\n                          id=\"ssh-url\"\n                          defaultValue=\"git@github.com:shadcn-ui/ui.git\"\n                          readOnly\n                        />\n                      </InputGroup>\n                      <FieldDescription>\n                        Use a password-protected SSH key.\n                      </FieldDescription>\n                    </Field>\n                  </TabsContent>\n                  <TabsContent value=\"cli\">\n                    <Field className=\"gap-2\">\n                      <FieldLabel htmlFor=\"cli-command\" className=\"sr-only\">\n                        CLI Command\n                      </FieldLabel>\n                      <InputGroup>\n                        <InputGroupAddon align=\"inline-end\">\n                          <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                              phosphor=\"CopyIcon\"\n                              remixicon=\"RiFileCopyLine\"\n                            />\n                          </InputGroupButton>\n                        </InputGroupAddon>\n                        <InputGroupInput\n                          id=\"cli-command\"\n                          defaultValue=\"gh repo clone shadcn-ui/ui\"\n                          readOnly\n                        />\n                      </InputGroup>\n                      <FieldDescription>\n                        Work fast with our official CLI.{\" \"}\n                        <a href=\"#learn-more\">Learn more</a>\n                      </FieldDescription>\n                    </Field>\n                  </TabsContent>\n                </div>\n              </Tabs>\n              <Separator className=\"-mx-2 my-2 w-auto!\" />\n              <div className=\"flex flex-col\">\n                <Button\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  className=\"justify-start gap-1.5\"\n                >\n                  <IconPlaceholder\n                    lucide=\"MonitorIcon\"\n                    tabler=\"IconDeviceDesktop\"\n                    hugeicons=\"ComputerIcon\"\n                    phosphor=\"MonitorIcon\"\n                    remixicon=\"RiComputerLine\"\n                    data-icon=\"inline-start\"\n                  />\n                  Open with GitHub Desktop\n                </Button>\n                <Button\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  className=\"justify-start gap-1.5\"\n                >\n                  <IconPlaceholder\n                    lucide=\"DownloadIcon\"\n                    tabler=\"IconDownload\"\n                    hugeicons=\"DownloadIcon\"\n                    phosphor=\"DownloadIcon\"\n                    remixicon=\"RiDownloadLine\"\n                    data-icon=\"inline-start\"\n                  />\n                  Download ZIP\n                </Button>\n              </div>\n            </TabsContent>\n          </Tabs>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\nfunction RepositoryToolbar() {\n  const [selectedBranch, setSelectedBranch] = React.useState(\"main\")\n  return (\n    <Example title=\"Repository Toolbar\">\n      <div className=\"flex items-center gap-2\">\n        <InputGroup>\n          <InputGroupInput placeholder=\"Go to file\" />\n          <InputGroupAddon align=\"inline-start\">\n            <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n              <IconPlaceholder\n                lucide=\"SearchIcon\"\n                tabler=\"IconSearch\"\n                hugeicons=\"SearchIcon\"\n                phosphor=\"MagnifyingGlassIcon\"\n                remixicon=\"RiSearchLine\"\n              />\n            </InputGroupButton>\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">\n            <Kbd>t</Kbd>\n          </InputGroupAddon>\n        </InputGroup>\n        <DropdownMenu>\n          <DropdownMenuTrigger render={<Button variant=\"outline\" />}>\n            Add File\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDown01Icon\"\n              phosphor=\"CaretDownIcon\"\n              remixicon=\"RiArrowDownSLine\"\n              data-icon=\"inline-end\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"PlusIcon\"\n                  tabler=\"IconPlus\"\n                  hugeicons=\"PlusSignIcon\"\n                  phosphor=\"PlusIcon\"\n                  remixicon=\"RiAddLine\"\n                />\n                Create new file\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"UploadIcon\"\n                  hugeicons=\"Upload01Icon\"\n                  tabler=\"IconUpload\"\n                  phosphor=\"UploadIcon\"\n                  remixicon=\"RiUploadLine\"\n                />\n                Upload files\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <Popover>\n          <Tooltip>\n            <TooltipTrigger\n              render={\n                <PopoverTrigger\n                  render={<Button variant=\"outline\" size=\"icon\" />}\n                />\n              }\n            >\n              <IconPlaceholder\n                lucide=\"CloudCogIcon\"\n                hugeicons=\"AiCloud01Icon\"\n                tabler=\"IconCloudCog\"\n                phosphor=\"CloudArrowUpIcon\"\n                remixicon=\"RiUploadCloudLine\"\n              />\n            </TooltipTrigger>\n            <TooltipContent>New Agent Task</TooltipContent>\n          </Tooltip>\n          <PopoverContent side=\"bottom\" align=\"end\" className=\"w-96\">\n            <Field>\n              <FieldLabel htmlFor=\"new-agent-task\">New Agent Task</FieldLabel>\n              <InputGroup>\n                <InputGroupTextarea placeholder=\"Describe your task in natural language.\"></InputGroupTextarea>\n                <InputGroupAddon align=\"block-end\">\n                  <Popover>\n                    <Tooltip>\n                      <PopoverTrigger\n                        render={\n                          <TooltipTrigger\n                            render={\n                              <InputGroupButton\n                                variant=\"outline\"\n                                size=\"icon-sm\"\n                              />\n                            }\n                          />\n                        }\n                      >\n                        <IconPlaceholder\n                          lucide=\"GitBranchIcon\"\n                          hugeicons=\"GitBranchIcon\"\n                          tabler=\"IconGitBranch\"\n                          phosphor=\"GitBranchIcon\"\n                          remixicon=\"RiGitBranchLine\"\n                        />\n                      </PopoverTrigger>\n                      <TooltipContent>Select a branch</TooltipContent>\n                    </Tooltip>\n                    <PopoverContent side=\"bottom\" align=\"start\" className=\"p-1\">\n                      <Field>\n                        <FieldLabel htmlFor=\"select-branch\" className=\"sr-only\">\n                          Select a Branch\n                        </FieldLabel>\n                        <Command>\n                          <CommandInput\n                            id=\"select-branch\"\n                            placeholder=\"Find a branch\"\n                          />\n                          <CommandEmpty>No branches found</CommandEmpty>\n                          <CommandList>\n                            <CommandGroup>\n                              {[\n                                \"main\",\n                                \"develop\",\n                                \"feature/123\",\n                                \"feature/user-authentication\",\n                                \"feature/dashboard-redesign\",\n                                \"bugfix/login-error\",\n                                \"hotfix/security-patch\",\n                                \"release/v2.0.0\",\n                                \"feature/api-integration\",\n                                \"bugfix/memory-leak\",\n                                \"feature/dark-mode\",\n                                \"feature/responsive-design\",\n                                \"bugfix/typo-fix\",\n                                \"feature/search-functionality\",\n                                \"release/v1.9.0\",\n                                \"feature/notifications\",\n                                \"bugfix/cache-issue\",\n                                \"feature/payment-gateway\",\n                                \"hotfix/critical-bug\",\n                                \"feature/admin-panel\",\n                                \"bugfix/validation-error\",\n                                \"feature/analytics\",\n                                \"release/v2.1.0\",\n                              ].map((branch) => (\n                                <CommandItem\n                                  key={branch}\n                                  value={branch}\n                                  onSelect={() => setSelectedBranch(branch)}\n                                  data-checked={selectedBranch === branch}\n                                >\n                                  {branch}\n                                </CommandItem>\n                              ))}\n                            </CommandGroup>\n                          </CommandList>\n                        </Command>\n                      </Field>\n                    </PopoverContent>\n                  </Popover>\n                  <Popover>\n                    <Tooltip>\n                      <PopoverTrigger\n                        render={\n                          <TooltipTrigger\n                            render={\n                              <InputGroupButton\n                                variant=\"outline\"\n                                size=\"icon-sm\"\n                              />\n                            }\n                          />\n                        }\n                      >\n                        <IconPlaceholder\n                          lucide=\"BotIcon\"\n                          hugeicons=\"RoboticIcon\"\n                          tabler=\"IconRobot\"\n                          phosphor=\"RobotIcon\"\n                          remixicon=\"RiRobotLine\"\n                        />\n                      </PopoverTrigger>\n                      <TooltipContent>Select Agent</TooltipContent>\n                    </Tooltip>\n                    <PopoverContent side=\"bottom\" align=\"start\">\n                      <Empty className=\"gap-4 p-0\">\n                        <EmptyHeader>\n                          <EmptyTitle className=\"text-sm\">\n                            This repository has no custom agents\n                          </EmptyTitle>\n                          <EmptyDescription className=\"text-xs\">\n                            Custom agents are reusable instructions and tools in\n                            your repository.\n                          </EmptyDescription>\n                        </EmptyHeader>\n                        <EmptyContent>\n                          <Button variant=\"outline\" size=\"sm\">\n                            Create Custom Agent\n                          </Button>\n                        </EmptyContent>\n                      </Empty>\n                    </PopoverContent>\n                  </Popover>\n                  <Tooltip>\n                    <TooltipTrigger\n                      render={\n                        <InputGroupButton\n                          variant=\"ghost\"\n                          size=\"icon-sm\"\n                          className=\"ml-auto\"\n                        />\n                      }\n                    >\n                      <IconPlaceholder\n                        lucide=\"SendIcon\"\n                        hugeicons=\"SentIcon\"\n                        tabler=\"IconSend\"\n                        phosphor=\"PaperPlaneTiltIcon\"\n                        remixicon=\"RiSendPlaneLine\"\n                      />\n                    </TooltipTrigger>\n                    <TooltipContent className=\"flex items-center gap-2 pr-2\">\n                      Start Task <Kbd>⏎</Kbd>\n                    </TooltipContent>\n                  </Tooltip>\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n          </PopoverContent>\n        </Popover>\n      </div>\n    </Example>\n  )\n}\nfunction Navbar() {\n  return (\n    <Example title=\"Account Menu\">\n      <header className=\"flex h-14 w-full items-center gap-2\">\n        <Drawer direction=\"left\">\n          <DrawerTrigger asChild>\n            <Button variant=\"outline\" size=\"icon\">\n              <IconPlaceholder\n                lucide=\"MenuIcon\"\n                hugeicons=\"Menu09Icon\"\n                tabler=\"IconMenu\"\n                phosphor=\"ListIcon\"\n                remixicon=\"RiListUnordered\"\n              />\n              <span className=\"sr-only\">Open menu</span>\n            </Button>\n          </DrawerTrigger>\n          <DrawerContent className=\"max-w-72\">\n            <DrawerHeader className=\"flex flex-row items-center justify-between px-5 pb-0\">\n              <DrawerTitle>Menu</DrawerTitle>\n              <DrawerClose asChild>\n                <Button variant=\"ghost\" size=\"icon-sm\" >\n                  <IconPlaceholder\n                    lucide=\"XIcon\"\n                    tabler=\"IconX\"\n                    hugeicons=\"Cancel01Icon\"\n                    phosphor=\"XIcon\"\n                    remixicon=\"RiCloseLine\"\n                  />\n                  <span className=\"sr-only\">Close</span>\n                </Button>\n              </DrawerClose>\n            </DrawerHeader>\n            <div className=\"p-2\">\n              <ItemGroup className=\"gap-px\">\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"HomeIcon\"\n                      tabler=\"IconHome\"\n                      hugeicons=\"HomeIcon\"\n                      phosphor=\"HouseIcon\"\n                      remixicon=\"RiHomeLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Home</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"CircleIcon\"\n                      tabler=\"IconCircle\"\n                      hugeicons=\"CircleIcon\"\n                      phosphor=\"CircleIcon\"\n                      remixicon=\"RiCircleLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Issues</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"GitBranchIcon\"\n                      tabler=\"IconGitBranch\"\n                      hugeicons=\"GitBranchIcon\"\n                      phosphor=\"GitBranchIcon\"\n                      remixicon=\"RiGitBranchLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Pull requests</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"LayoutGridIcon\"\n                      tabler=\"IconLayoutGrid\"\n                      hugeicons=\"GridIcon\"\n                      phosphor=\"GridFourIcon\"\n                      remixicon=\"RiGridLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Projects</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"MailIcon\"\n                      tabler=\"IconMail\"\n                      hugeicons=\"MailIcon\"\n                      phosphor=\"EnvelopeIcon\"\n                      remixicon=\"RiMailLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Discussions</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"ServerIcon\"\n                      tabler=\"IconServer\"\n                      hugeicons=\"ServerStackIcon\"\n                      phosphor=\"HardDrivesIcon\"\n                      remixicon=\"RiHardDriveLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Codespaces</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"BotIcon\"\n                      tabler=\"IconRobot\"\n                      hugeicons=\"RoboticIcon\"\n                      phosphor=\"RobotIcon\"\n                      remixicon=\"RiRobotLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Copilot</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"SparklesIcon\"\n                      tabler=\"IconSparkles\"\n                      hugeicons=\"SparklesIcon\"\n                      phosphor=\"SparkleIcon\"\n                      remixicon=\"RiSparklingLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Spark</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <ItemSeparator />\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"SearchIcon\"\n                      tabler=\"IconSearch\"\n                      hugeicons=\"SearchIcon\"\n                      phosphor=\"MagnifyingGlassIcon\"\n                      remixicon=\"RiSearchLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Explore</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"ShoppingBagIcon\"\n                      tabler=\"IconShoppingBag\"\n                      hugeicons=\"ShoppingBasket01Icon\"\n                      phosphor=\"BagIcon\"\n                      remixicon=\"RiShoppingBagLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Marketplace</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"LinkIcon\"\n                      tabler=\"IconLink\"\n                      hugeicons=\"LinkIcon\"\n                      phosphor=\"LinkIcon\"\n                      remixicon=\"RiLinksLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>MCP registry</ItemTitle>\n                  </ItemContent>\n                </Item>\n              </ItemGroup>\n            </div>\n          </DrawerContent>\n        </Drawer>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <Button\n                variant=\"ghost\"\n                size=\"icon\"\n                className=\"ml-auto rounded-full\"\n              />\n            }\n          >\n            <Avatar>\n              <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"shadcn\" />\n              <AvatarFallback>SC</AvatarFallback>\n            </Avatar>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-56\" align=\"end\">\n            <DropdownMenuGroup>\n              <DropdownMenuLabel className=\"p-0 font-normal\">\n                <Item className=\"px-2 py-1 pb-0.5\" size=\"sm\">\n                  <ItemMedia>\n                    <Avatar>\n                      <AvatarImage\n                        src=\"https://github.com/shadcn.png\"\n                        alt=\"shadcn\"\n                      />\n                      <AvatarFallback>SC</AvatarFallback>\n                    </Avatar>\n                  </ItemMedia>\n                  <ItemContent className=\"gap-0\">\n                    <ItemTitle className=\"text-foreground text-sm\">\n                      shadcn\n                    </ItemTitle>\n                    <ItemDescription className=\"text-xs\">\n                      shadcn@example.com\n                    </ItemDescription>\n                  </ItemContent>\n                </Item>\n              </DropdownMenuLabel>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SmileIcon\"\n                  tabler=\"IconMoodSmile\"\n                  hugeicons=\"SmileIcon\"\n                  phosphor=\"SmileyIcon\"\n                  remixicon=\"RiEmotionLine\"\n                />\n                Set status\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CircleAlertIcon\"\n                  tabler=\"IconExclamationCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                  phosphor=\"WarningCircleIcon\"\n                  remixicon=\"RiErrorWarningLine\"\n                />\n                Single sign-on\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"UserIcon\"\n                  tabler=\"IconUser\"\n                  hugeicons=\"UserIcon\"\n                  phosphor=\"UserIcon\"\n                  remixicon=\"RiUserLine\"\n                />\n                Profile\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"FolderIcon\"\n                  tabler=\"IconFolder\"\n                  hugeicons=\"FolderIcon\"\n                  phosphor=\"FolderIcon\"\n                  remixicon=\"RiFolderLine\"\n                />\n                Repositories\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"StarIcon\"\n                  tabler=\"IconStar\"\n                  hugeicons=\"StarIcon\"\n                  phosphor=\"StarIcon\"\n                  remixicon=\"RiStarLine\"\n                />\n                Stars\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CodeIcon\"\n                  tabler=\"IconCode\"\n                  hugeicons=\"CodeIcon\"\n                  phosphor=\"CodeIcon\"\n                  remixicon=\"RiCodeLine\"\n                />\n                Gists\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"FolderIcon\"\n                  tabler=\"IconFolder\"\n                  hugeicons=\"FolderIcon\"\n                  phosphor=\"FolderIcon\"\n                  remixicon=\"RiFolderLine\"\n                />\n                Organizations\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"ServerIcon\"\n                  tabler=\"IconServer\"\n                  hugeicons=\"ServerStackIcon\"\n                  phosphor=\"HardDrivesIcon\"\n                  remixicon=\"RiHardDriveLine\"\n                />\n                Enterprises\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"HeartIcon\"\n                  tabler=\"IconHeart\"\n                  hugeicons=\"FavouriteIcon\"\n                  phosphor=\"HeartIcon\"\n                  remixicon=\"RiHeartLine\"\n                />\n                Sponsors\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SettingsIcon\"\n                  tabler=\"IconSettings\"\n                  hugeicons=\"SettingsIcon\"\n                  phosphor=\"GearIcon\"\n                  remixicon=\"RiSettingsLine\"\n                />\n                Settings\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"BotIcon\"\n                  tabler=\"IconRobot\"\n                  hugeicons=\"RoboticIcon\"\n                  phosphor=\"RobotIcon\"\n                  remixicon=\"RiRobotLine\"\n                />\n                Copilot settings\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SparklesIcon\"\n                  tabler=\"IconSparkles\"\n                  hugeicons=\"SparklesIcon\"\n                  phosphor=\"SparkleIcon\"\n                  remixicon=\"RiSparklingLine\"\n                />\n                Feature preview\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"MonitorIcon\"\n                  tabler=\"IconDeviceDesktop\"\n                  hugeicons=\"ComputerIcon\"\n                  phosphor=\"MonitorIcon\"\n                  remixicon=\"RiComputerLine\"\n                />\n                Appearance\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"UserIcon\"\n                  tabler=\"IconUser\"\n                  hugeicons=\"UserIcon\"\n                  phosphor=\"UserIcon\"\n                  remixicon=\"RiUserLine\"\n                />\n                Accessibility\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUpIcon\"\n                  phosphor=\"ArrowUpIcon\"\n                  remixicon=\"RiArrowUpLine\"\n                />\n                Upgrade\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"LogOutIcon\"\n                  tabler=\"IconLogout\"\n                  hugeicons=\"LogoutIcon\"\n                  phosphor=\"SignOutIcon\"\n                  remixicon=\"RiLogoutBoxLine\"\n                />\n                Sign out\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </header>\n    </Example>\n  )\n}\nconst usernames = [\n  \"shadcn\",\n  \"vercel\",\n  \"nextjs\",\n  \"tailwindlabs\",\n  \"typescript-lang\",\n  \"eslint\",\n  \"prettier\",\n  \"babel\",\n  \"webpack\",\n  \"rollup\",\n  \"parcel\",\n  \"vite\",\n  \"react\",\n  \"vue\",\n  \"angular\",\n  \"solid\",\n]\nfunction Contributors() {\n  return (\n    <Example title=\"Contributors\" className=\"items-center lg:p-16\">\n      <Card className=\"max-w-sm\">\n        <CardHeader>\n          <CardTitle>\n            Contributors <Badge variant=\"secondary\">312</Badge>\n          </CardTitle>\n        </CardHeader>\n        <CardContent>\n          <div className=\"flex flex-wrap gap-2\">\n            {usernames.map((username) => (\n              <Avatar key={username}>\n                <AvatarImage\n                  src={`https://github.com/${username}.png`}\n                  alt={username}\n                />\n                <AvatarFallback>{username.charAt(0)}</AvatarFallback>\n              </Avatar>\n            ))}\n          </div>\n        </CardContent>\n        <CardFooter>\n          <a href=\"#\" className=\"text-sm underline underline-offset-4\">\n            + 810 contributors\n          </a>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\nfunction Profile() {\n  return (\n    <Example title=\"Profile\" className=\"items-center justify-center\">\n      <Card className=\"mx-auto w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>Profile</CardTitle>\n          <CardDescription>Manage your profile information.</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form id=\"profile\">\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"name\">Name</FieldLabel>\n                <Input id=\"name\" placeholder=\"shadcn\" />\n                <FieldDescription>\n                  Your name may appear around GitHub where you contribute or are\n                  mentioned. You can remove it at any time.\n                </FieldDescription>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"email\">Public Email</FieldLabel>\n                <NativeSelect id=\"email\">\n                  <NativeSelectOption value=\"m@shadcn.com\">\n                    m@shadcn.com\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"m@gmail.com\">\n                    m@gmail.com\n                  </NativeSelectOption>\n                </NativeSelect>\n                <FieldDescription>\n                  You can manage verified email addresses in your{\" \"}\n                  <a href=\"#email-settings\">email settings</a>.\n                </FieldDescription>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"bio\">Bio</FieldLabel>\n                <Textarea\n                  id=\"bio\"\n                  placeholder=\"Tell us a little bit about yourself\"\n                />\n                <FieldDescription>\n                  You can <span>@mention</span> other users and organizations to\n                  link to them.\n                </FieldDescription>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button form=\"profile\">Save Profile</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\nfunction ContributionsActivity() {\n  return (\n    <Example title=\"Contributions Activity\" className=\"justify-center\">\n      <Card className=\"mx-auto w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>Contributions & Activity</CardTitle>\n          <CardDescription>\n            Manage your contributions and activity visibility.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form id=\"contributions-activity\">\n            <FieldGroup>\n              <FieldSet>\n                <FieldLegend className=\"sr-only\">\n                  Contributions & activity\n                </FieldLegend>\n                <FieldGroup className=\"gap-3\">\n                  <Field orientation=\"horizontal\">\n                    <Checkbox id=\"private-profile\" />\n                    <FieldContent>\n                      <FieldLabel\n                        htmlFor=\"private-profile\"\n                        className=\"font-normal\"\n                      >\n                        Make profile private and hide activity\n                      </FieldLabel>\n                      <FieldDescription>\n                        Enabling this will hide your contributions and activity\n                        from your GitHub profile and from social features like\n                        followers, stars, feeds, leaderboards and releases.\n                      </FieldDescription>\n                    </FieldContent>\n                  </Field>\n                  <Field orientation=\"horizontal\">\n                    <Checkbox id=\"private-contributions\" defaultChecked />\n                    <FieldContent>\n                      <FieldLabel\n                        htmlFor=\"private-contributions\"\n                        className=\"font-normal\"\n                      >\n                        Include private contributions on my profile\n                      </FieldLabel>\n                      <FieldDescription>\n                        Your contribution graph, achievements, and activity\n                        overview will show your private contributions without\n                        revealing any repository or organization information.{\" \"}\n                        <a href=\"#read-more\">Read more</a>.\n                      </FieldDescription>\n                    </FieldContent>\n                  </Field>\n                </FieldGroup>\n              </FieldSet>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button form=\"contributions-activity\">Save Changes</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\nconst users = [\n  \"shadcn\",\n  \"maxleiter\",\n  \"evilrabbit\",\n  \"pranathip\",\n  \"jorgezreik\",\n  \"shuding\",\n  \"rauchg\",\n]\nfunction AssignIssue() {\n  const anchor = useComboboxAnchor()\n  return (\n    <Example title=\"User Select\" className=\"items-center justify-center\">\n      <Card className=\"w-full max-w-sm\" size=\"sm\">\n        <CardHeader className=\"border-b\">\n          <CardTitle className=\"text-sm\">Assign Issue</CardTitle>\n          <CardDescription className=\"text-sm\">\n            Select users to assign to this issue.\n          </CardDescription>\n          <CardAction>\n            <Tooltip>\n              <TooltipTrigger\n                render={<Button variant=\"outline\" size=\"icon-xs\" />}\n              >\n                <IconPlaceholder\n                  lucide=\"PlusIcon\"\n                  tabler=\"IconPlus\"\n                  hugeicons=\"PlusSignIcon\"\n                  phosphor=\"PlusIcon\"\n                  remixicon=\"RiAddLine\"\n                />\n              </TooltipTrigger>\n              <TooltipContent>Add user</TooltipContent>\n            </Tooltip>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <Combobox\n            multiple\n            autoHighlight\n            items={users}\n            defaultValue={[users[0]]}\n          >\n            <ComboboxChips ref={anchor}>\n              <ComboboxValue>\n                {(values) => (\n                  <React.Fragment>\n                    {values.map((username: string) => (\n                      <ComboboxChip key={username}>\n                        <Avatar className=\"size-4\">\n                          <AvatarImage\n                            src={`https://github.com/${username}.png`}\n                            alt={username}\n                          />\n                          <AvatarFallback>{username.charAt(0)}</AvatarFallback>\n                        </Avatar>\n                        {username}\n                      </ComboboxChip>\n                    ))}\n                    <ComboboxChipsInput\n                      placeholder={\n                        values.length > 0 ? undefined : \"Select a item...\"\n                      }\n                    />\n                  </React.Fragment>\n                )}\n              </ComboboxValue>\n            </ComboboxChips>\n            <ComboboxContent anchor={anchor}>\n              <ComboboxEmpty>No users found.</ComboboxEmpty>\n              <ComboboxList>\n                {(username) => (\n                  <ComboboxItem key={username} value={username}>\n                    <Avatar className=\"size-5\">\n                      <AvatarImage\n                        src={`https://github.com/${username}.png`}\n                        alt={username}\n                      />\n                      <AvatarFallback>{username.charAt(0)}</AvatarFallback>\n                    </Avatar>\n                    {username}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-mira/components/example\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/base-mira/ui/avatar\"\nimport { Badge } from \"@/registry/base-mira/ui/badge\"\nimport { Button } from \"@/registry/base-mira/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-mira/ui/card\"\nimport { Checkbox } from \"@/registry/base-mira/ui/checkbox\"\nimport {\n  Combobox,\n  ComboboxChip,\n  ComboboxChips,\n  ComboboxChipsInput,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxItem,\n  ComboboxList,\n  ComboboxValue,\n  useComboboxAnchor,\n} from \"@/registry/base-mira/ui/combobox\"\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"@/registry/base-mira/ui/command\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/base-mira/ui/drawer\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-mira/ui/dropdown-menu\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/base-mira/ui/empty\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n} from \"@/registry/base-mira/ui/field\"\nimport { Input } from \"@/registry/base-mira/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupTextarea,\n} from \"@/registry/base-mira/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemGroup,\n  ItemMedia,\n  ItemSeparator,\n  ItemTitle,\n} from \"@/registry/base-mira/ui/item\"\nimport { Kbd } from \"@/registry/base-mira/ui/kbd\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/base-mira/ui/native-select\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/base-mira/ui/popover\"\nimport { Separator } from \"@/registry/base-mira/ui/separator\"\nimport { Spinner } from \"@/registry/base-mira/ui/spinner\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/base-mira/ui/tabs\"\nimport { Textarea } from \"@/registry/base-mira/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/base-mira/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function GithubBlock() {\n  return (\n    <ExampleWrapper>\n      <CodespacesCard />\n      <AssignIssue />\n      <Navbar />\n      <RepositoryToolbar />\n      <Profile />\n      <ContributionsActivity />\n      <Contributors />\n    </ExampleWrapper>\n  )\n}\nfunction CodespacesCard() {\n  const [isCreatingCodespace, setIsCreatingCodespace] = React.useState(false)\n  return (\n    <Example title=\"Codespaces\" className=\"min-h-[550px] lg:p-12\">\n      <Card className=\"mx-auto w-full max-w-sm\" size=\"sm\">\n        <CardContent>\n          <Tabs defaultValue=\"codespaces\">\n            <TabsList className=\"w-full\">\n              <TabsTrigger value=\"codespaces\">Codespaces</TabsTrigger>\n              <TabsTrigger value=\"local\">Local</TabsTrigger>\n            </TabsList>\n            <TabsContent value=\"codespaces\">\n              <Item size=\"sm\" className=\"px-1 pt-2\">\n                <ItemContent>\n                  <ItemTitle>Codespaces</ItemTitle>\n                  <ItemDescription>\n                    Your workspaces in the cloud\n                  </ItemDescription>\n                </ItemContent>\n                <ItemActions>\n                  <Tooltip>\n                    <TooltipTrigger\n                      render={<Button variant=\"ghost\" size=\"icon-sm\" />}\n                    >\n                      <IconPlaceholder\n                        lucide=\"PlusIcon\"\n                        tabler=\"IconPlus\"\n                        hugeicons=\"PlusSignIcon\"\n                        phosphor=\"PlusIcon\"\n                        remixicon=\"RiAddLine\"\n                      />\n                    </TooltipTrigger>\n                    <TooltipContent side=\"bottom\">\n                      Create a codespace on main\n                    </TooltipContent>\n                  </Tooltip>\n                  <DropdownMenu>\n                    <Tooltip>\n                      <TooltipTrigger\n                        render={\n                          <DropdownMenuTrigger\n                            render={<Button variant=\"ghost\" size=\"icon-sm\" />}\n                          />\n                        }\n                      >\n                        <IconPlaceholder\n                          lucide=\"MoreHorizontalIcon\"\n                          tabler=\"IconDots\"\n                          hugeicons=\"MoreHorizontalCircle01Icon\"\n                          phosphor=\"DotsThreeOutlineIcon\"\n                          remixicon=\"RiMoreLine\"\n                        />\n                      </TooltipTrigger>\n                      <TooltipContent side=\"bottom\">\n                        Codespace repository configuration\n                      </TooltipContent>\n                    </Tooltip>\n                    <DropdownMenuContent align=\"end\" className=\"w-56\">\n                      <DropdownMenuGroup>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"PlusIcon\"\n                            tabler=\"IconPlus\"\n                            hugeicons=\"PlusSignIcon\"\n                            phosphor=\"PlusIcon\"\n                            remixicon=\"RiAddLine\"\n                          />\n                          New with options...\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"ContainerIcon\"\n                            tabler=\"IconBox\"\n                            hugeicons=\"CubeIcon\"\n                            phosphor=\"CubeIcon\"\n                            remixicon=\"RiBox1Line\"\n                          />\n                          Configure dev container\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"ZapIcon\"\n                            tabler=\"IconBolt\"\n                            hugeicons=\"ZapIcon\"\n                            phosphor=\"LightningIcon\"\n                            remixicon=\"RiFlashlightLine\"\n                          />\n                          Set up prebuilds\n                        </DropdownMenuItem>\n                      </DropdownMenuGroup>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuGroup>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"ServerIcon\"\n                            tabler=\"IconServer\"\n                            hugeicons=\"ServerStackIcon\"\n                            phosphor=\"HardDrivesIcon\"\n                            remixicon=\"RiHardDriveLine\"\n                          />\n                          Manage codespaces\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"ShareIcon\"\n                            tabler=\"IconShare2\"\n                            hugeicons=\"Share03Icon\"\n                            phosphor=\"ShareIcon\"\n                            remixicon=\"RiShareLine\"\n                          />\n                          Share deep link\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"InfoIcon\"\n                            tabler=\"IconInfoCircle\"\n                            hugeicons=\"AlertCircleIcon\"\n                            phosphor=\"InfoIcon\"\n                            remixicon=\"RiInformationLine\"\n                          />\n                          What are codespaces?\n                        </DropdownMenuItem>\n                      </DropdownMenuGroup>\n                    </DropdownMenuContent>\n                  </DropdownMenu>\n                </ItemActions>\n              </Item>\n              <Separator className=\"-mx-2 my-2 w-auto!\" />\n              <Empty className=\"p-4\">\n                <EmptyHeader>\n                  <EmptyMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"ServerIcon\"\n                      tabler=\"IconServer\"\n                      hugeicons=\"ServerStackIcon\"\n                      phosphor=\"HardDrivesIcon\"\n                      remixicon=\"RiHardDriveLine\"\n                    />\n                  </EmptyMedia>\n                  <EmptyTitle>No codespaces</EmptyTitle>\n                  <EmptyDescription>\n                    You don&apos;t have any codespaces with this repository\n                    checked out\n                  </EmptyDescription>\n                </EmptyHeader>\n                <EmptyContent>\n                  <Button\n                    size=\"sm\"\n                    onClick={() => {\n                      setIsCreatingCodespace(true)\n                      setTimeout(() => {\n                        setIsCreatingCodespace(false)\n                      }, 2000)\n                    }}\n                    disabled={isCreatingCodespace}\n                  >\n                    {isCreatingCodespace ? (\n                      <Spinner data-icon=\"inline-start\" />\n                    ) : (\n                      \"\"\n                    )}\n                    Create Codespace\n                  </Button>\n                  <a\n                    href=\"#learn-more\"\n                    className=\"text-muted-foreground text-xs underline underline-offset-4\"\n                  >\n                    Learn more about codespaces\n                  </a>\n                </EmptyContent>\n              </Empty>\n              <Separator className=\"-mx-2 my-2 w-auto!\" />\n              <div className=\"text-muted-foreground p-1.5 text-xs\">\n                Codespace usage for this repository is paid for by{\" \"}\n                <span className=\"font-medium\">shadcn</span>.\n              </div>\n            </TabsContent>\n            <TabsContent value=\"local\">\n              <Item size=\"sm\" className=\"hidden p-0\">\n                <ItemContent>\n                  <ItemTitle className=\"gap-2\">\n                    <IconPlaceholder\n                      lucide=\"TerminalIcon\"\n                      tabler=\"IconTerminal\"\n                      hugeicons=\"ComputerTerminal01Icon\"\n                      phosphor=\"TerminalIcon\"\n                      remixicon=\"RiTerminalBoxLine\"\n                      className=\"size-4\"\n                    />\n                    Clone\n                  </ItemTitle>\n                </ItemContent>\n                <ItemActions>\n                  <Tooltip>\n                    <TooltipTrigger\n                      render={<Button variant=\"ghost\" size=\"icon\" />}\n                    >\n                      <IconPlaceholder\n                        lucide=\"InfoIcon\"\n                        tabler=\"IconInfoCircle\"\n                        hugeicons=\"AlertCircleIcon\"\n                        phosphor=\"InfoIcon\"\n                        remixicon=\"RiInformationLine\"\n                      />\n                    </TooltipTrigger>\n                    <TooltipContent side=\"left\">\n                      Which remote URL should I use?\n                    </TooltipContent>\n                  </Tooltip>\n                </ItemActions>\n              </Item>\n              <Tabs defaultValue=\"https\">\n                <TabsList\n                  variant=\"line\"\n                  className=\"w-full justify-start border-b *:[button]:flex-0\"\n                >\n                  <TabsTrigger value=\"https\">HTTPS</TabsTrigger>\n                  <TabsTrigger value=\"ssh\">SSH</TabsTrigger>\n                  <TabsTrigger value=\"cli\">GitHub CLI</TabsTrigger>\n                </TabsList>\n                <div className=\"bg-muted/30 rounded-md border p-2\">\n                  <TabsContent value=\"https\">\n                    <Field className=\"gap-2\">\n                      <FieldLabel htmlFor=\"https-url\" className=\"sr-only\">\n                        HTTPS URL\n                      </FieldLabel>\n                      <InputGroup>\n                        <InputGroupAddon align=\"inline-end\">\n                          <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                              phosphor=\"CopyIcon\"\n                              remixicon=\"RiFileCopyLine\"\n                            />\n                          </InputGroupButton>\n                        </InputGroupAddon>\n                        <InputGroupInput\n                          id=\"https-url\"\n                          defaultValue=\"https://github.com/shadcn-ui/ui.git\"\n                          readOnly\n                        />\n                      </InputGroup>\n                      <FieldDescription>\n                        Clone using the web URL.\n                      </FieldDescription>\n                    </Field>\n                  </TabsContent>\n                  <TabsContent value=\"ssh\">\n                    <Field className=\"gap-2\">\n                      <FieldLabel htmlFor=\"ssh-url\" className=\"sr-only\">\n                        SSH URL\n                      </FieldLabel>\n                      <InputGroup>\n                        <InputGroupAddon align=\"inline-end\">\n                          <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                              phosphor=\"CopyIcon\"\n                              remixicon=\"RiFileCopyLine\"\n                            />\n                          </InputGroupButton>\n                        </InputGroupAddon>\n                        <InputGroupInput\n                          id=\"ssh-url\"\n                          defaultValue=\"git@github.com:shadcn-ui/ui.git\"\n                          readOnly\n                        />\n                      </InputGroup>\n                      <FieldDescription>\n                        Use a password-protected SSH key.\n                      </FieldDescription>\n                    </Field>\n                  </TabsContent>\n                  <TabsContent value=\"cli\">\n                    <Field className=\"gap-2\">\n                      <FieldLabel htmlFor=\"cli-command\" className=\"sr-only\">\n                        CLI Command\n                      </FieldLabel>\n                      <InputGroup>\n                        <InputGroupAddon align=\"inline-end\">\n                          <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                              phosphor=\"CopyIcon\"\n                              remixicon=\"RiFileCopyLine\"\n                            />\n                          </InputGroupButton>\n                        </InputGroupAddon>\n                        <InputGroupInput\n                          id=\"cli-command\"\n                          defaultValue=\"gh repo clone shadcn-ui/ui\"\n                          readOnly\n                        />\n                      </InputGroup>\n                      <FieldDescription>\n                        Work fast with our official CLI.{\" \"}\n                        <a href=\"#learn-more\">Learn more</a>\n                      </FieldDescription>\n                    </Field>\n                  </TabsContent>\n                </div>\n              </Tabs>\n              <Separator className=\"-mx-2 my-2 w-auto!\" />\n              <div className=\"flex flex-col\">\n                <Button\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  className=\"justify-start gap-1.5\"\n                >\n                  <IconPlaceholder\n                    lucide=\"MonitorIcon\"\n                    tabler=\"IconDeviceDesktop\"\n                    hugeicons=\"ComputerIcon\"\n                    phosphor=\"MonitorIcon\"\n                    remixicon=\"RiComputerLine\"\n                    data-icon=\"inline-start\"\n                  />\n                  Open with GitHub Desktop\n                </Button>\n                <Button\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  className=\"justify-start gap-1.5\"\n                >\n                  <IconPlaceholder\n                    lucide=\"DownloadIcon\"\n                    tabler=\"IconDownload\"\n                    hugeicons=\"DownloadIcon\"\n                    phosphor=\"DownloadIcon\"\n                    remixicon=\"RiDownloadLine\"\n                    data-icon=\"inline-start\"\n                  />\n                  Download ZIP\n                </Button>\n              </div>\n            </TabsContent>\n          </Tabs>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\nfunction RepositoryToolbar() {\n  const [selectedBranch, setSelectedBranch] = React.useState(\"main\")\n  return (\n    <Example title=\"Repository Toolbar\">\n      <div className=\"flex items-center gap-2\">\n        <InputGroup>\n          <InputGroupInput placeholder=\"Go to file\" />\n          <InputGroupAddon align=\"inline-start\">\n            <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n              <IconPlaceholder\n                lucide=\"SearchIcon\"\n                tabler=\"IconSearch\"\n                hugeicons=\"SearchIcon\"\n                phosphor=\"MagnifyingGlassIcon\"\n                remixicon=\"RiSearchLine\"\n              />\n            </InputGroupButton>\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">\n            <Kbd>t</Kbd>\n          </InputGroupAddon>\n        </InputGroup>\n        <DropdownMenu>\n          <DropdownMenuTrigger render={<Button variant=\"outline\" />}>\n            Add File\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDown01Icon\"\n              phosphor=\"CaretDownIcon\"\n              remixicon=\"RiArrowDownSLine\"\n              data-icon=\"inline-end\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"PlusIcon\"\n                  tabler=\"IconPlus\"\n                  hugeicons=\"PlusSignIcon\"\n                  phosphor=\"PlusIcon\"\n                  remixicon=\"RiAddLine\"\n                />\n                Create new file\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"UploadIcon\"\n                  hugeicons=\"Upload01Icon\"\n                  tabler=\"IconUpload\"\n                  phosphor=\"UploadIcon\"\n                  remixicon=\"RiUploadLine\"\n                />\n                Upload files\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <Popover>\n          <Tooltip>\n            <TooltipTrigger\n              render={\n                <PopoverTrigger\n                  render={<Button variant=\"outline\" size=\"icon\" />}\n                />\n              }\n            >\n              <IconPlaceholder\n                lucide=\"CloudCogIcon\"\n                hugeicons=\"AiCloud01Icon\"\n                tabler=\"IconCloudCog\"\n                phosphor=\"CloudArrowUpIcon\"\n                remixicon=\"RiUploadCloudLine\"\n              />\n            </TooltipTrigger>\n            <TooltipContent>New Agent Task</TooltipContent>\n          </Tooltip>\n          <PopoverContent side=\"bottom\" align=\"end\" className=\"w-96\">\n            <Field>\n              <FieldLabel htmlFor=\"new-agent-task\">New Agent Task</FieldLabel>\n              <InputGroup>\n                <InputGroupTextarea placeholder=\"Describe your task in natural language.\"></InputGroupTextarea>\n                <InputGroupAddon align=\"block-end\">\n                  <Popover>\n                    <Tooltip>\n                      <PopoverTrigger\n                        render={\n                          <TooltipTrigger\n                            render={\n                              <InputGroupButton\n                                variant=\"outline\"\n                                size=\"icon-sm\"\n                              />\n                            }\n                          />\n                        }\n                      >\n                        <IconPlaceholder\n                          lucide=\"GitBranchIcon\"\n                          hugeicons=\"GitBranchIcon\"\n                          tabler=\"IconGitBranch\"\n                          phosphor=\"GitBranchIcon\"\n                          remixicon=\"RiGitBranchLine\"\n                        />\n                      </PopoverTrigger>\n                      <TooltipContent>Select a branch</TooltipContent>\n                    </Tooltip>\n                    <PopoverContent side=\"bottom\" align=\"start\" className=\"p-1\">\n                      <Field>\n                        <FieldLabel htmlFor=\"select-branch\" className=\"sr-only\">\n                          Select a Branch\n                        </FieldLabel>\n                        <Command>\n                          <CommandInput\n                            id=\"select-branch\"\n                            placeholder=\"Find a branch\"\n                          />\n                          <CommandEmpty>No branches found</CommandEmpty>\n                          <CommandList>\n                            <CommandGroup>\n                              {[\n                                \"main\",\n                                \"develop\",\n                                \"feature/123\",\n                                \"feature/user-authentication\",\n                                \"feature/dashboard-redesign\",\n                                \"bugfix/login-error\",\n                                \"hotfix/security-patch\",\n                                \"release/v2.0.0\",\n                                \"feature/api-integration\",\n                                \"bugfix/memory-leak\",\n                                \"feature/dark-mode\",\n                                \"feature/responsive-design\",\n                                \"bugfix/typo-fix\",\n                                \"feature/search-functionality\",\n                                \"release/v1.9.0\",\n                                \"feature/notifications\",\n                                \"bugfix/cache-issue\",\n                                \"feature/payment-gateway\",\n                                \"hotfix/critical-bug\",\n                                \"feature/admin-panel\",\n                                \"bugfix/validation-error\",\n                                \"feature/analytics\",\n                                \"release/v2.1.0\",\n                              ].map((branch) => (\n                                <CommandItem\n                                  key={branch}\n                                  value={branch}\n                                  onSelect={() => setSelectedBranch(branch)}\n                                  data-checked={selectedBranch === branch}\n                                >\n                                  {branch}\n                                </CommandItem>\n                              ))}\n                            </CommandGroup>\n                          </CommandList>\n                        </Command>\n                      </Field>\n                    </PopoverContent>\n                  </Popover>\n                  <Popover>\n                    <Tooltip>\n                      <PopoverTrigger\n                        render={\n                          <TooltipTrigger\n                            render={\n                              <InputGroupButton\n                                variant=\"outline\"\n                                size=\"icon-sm\"\n                              />\n                            }\n                          />\n                        }\n                      >\n                        <IconPlaceholder\n                          lucide=\"BotIcon\"\n                          hugeicons=\"RoboticIcon\"\n                          tabler=\"IconRobot\"\n                          phosphor=\"RobotIcon\"\n                          remixicon=\"RiRobotLine\"\n                        />\n                      </PopoverTrigger>\n                      <TooltipContent>Select Agent</TooltipContent>\n                    </Tooltip>\n                    <PopoverContent side=\"bottom\" align=\"start\">\n                      <Empty className=\"gap-4 p-0\">\n                        <EmptyHeader>\n                          <EmptyTitle className=\"text-sm\">\n                            This repository has no custom agents\n                          </EmptyTitle>\n                          <EmptyDescription className=\"text-xs\">\n                            Custom agents are reusable instructions and tools in\n                            your repository.\n                          </EmptyDescription>\n                        </EmptyHeader>\n                        <EmptyContent>\n                          <Button variant=\"outline\" size=\"sm\">\n                            Create Custom Agent\n                          </Button>\n                        </EmptyContent>\n                      </Empty>\n                    </PopoverContent>\n                  </Popover>\n                  <Tooltip>\n                    <TooltipTrigger\n                      render={\n                        <InputGroupButton\n                          variant=\"ghost\"\n                          size=\"icon-sm\"\n                          className=\"ml-auto\"\n                        />\n                      }\n                    >\n                      <IconPlaceholder\n                        lucide=\"SendIcon\"\n                        hugeicons=\"SentIcon\"\n                        tabler=\"IconSend\"\n                        phosphor=\"PaperPlaneTiltIcon\"\n                        remixicon=\"RiSendPlaneLine\"\n                      />\n                    </TooltipTrigger>\n                    <TooltipContent className=\"flex items-center gap-2 pr-2\">\n                      Start Task <Kbd>⏎</Kbd>\n                    </TooltipContent>\n                  </Tooltip>\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n          </PopoverContent>\n        </Popover>\n      </div>\n    </Example>\n  )\n}\nfunction Navbar() {\n  return (\n    <Example title=\"Account Menu\">\n      <header className=\"flex h-14 w-full items-center gap-2\">\n        <Drawer direction=\"left\">\n          <DrawerTrigger asChild>\n            <Button variant=\"outline\" size=\"icon\">\n              <IconPlaceholder\n                lucide=\"MenuIcon\"\n                hugeicons=\"Menu09Icon\"\n                tabler=\"IconMenu\"\n                phosphor=\"ListIcon\"\n                remixicon=\"RiListUnordered\"\n              />\n              <span className=\"sr-only\">Open menu</span>\n            </Button>\n          </DrawerTrigger>\n          <DrawerContent className=\"max-w-72\">\n            <DrawerHeader className=\"flex flex-row items-center justify-between px-5 pb-0\">\n              <DrawerTitle>Menu</DrawerTitle>\n              <DrawerClose asChild>\n                <Button variant=\"ghost\" size=\"icon-sm\">\n                  <IconPlaceholder\n                    lucide=\"XIcon\"\n                    tabler=\"IconX\"\n                    hugeicons=\"Cancel01Icon\"\n                    phosphor=\"XIcon\"\n                    remixicon=\"RiCloseLine\"\n                  />\n                  <span className=\"sr-only\">Close</span>\n                </Button>\n              </DrawerClose>\n            </DrawerHeader>\n            <div className=\"p-2\">\n              <ItemGroup className=\"gap-px\">\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"HomeIcon\"\n                      tabler=\"IconHome\"\n                      hugeicons=\"HomeIcon\"\n                      phosphor=\"HouseIcon\"\n                      remixicon=\"RiHomeLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Home</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"CircleIcon\"\n                      tabler=\"IconCircle\"\n                      hugeicons=\"CircleIcon\"\n                      phosphor=\"CircleIcon\"\n                      remixicon=\"RiCircleLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Issues</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"GitBranchIcon\"\n                      tabler=\"IconGitBranch\"\n                      hugeicons=\"GitBranchIcon\"\n                      phosphor=\"GitBranchIcon\"\n                      remixicon=\"RiGitBranchLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Pull requests</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"LayoutGridIcon\"\n                      tabler=\"IconLayoutGrid\"\n                      hugeicons=\"GridIcon\"\n                      phosphor=\"GridFourIcon\"\n                      remixicon=\"RiGridLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Projects</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"MailIcon\"\n                      tabler=\"IconMail\"\n                      hugeicons=\"MailIcon\"\n                      phosphor=\"EnvelopeIcon\"\n                      remixicon=\"RiMailLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Discussions</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"ServerIcon\"\n                      tabler=\"IconServer\"\n                      hugeicons=\"ServerStackIcon\"\n                      phosphor=\"HardDrivesIcon\"\n                      remixicon=\"RiHardDriveLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Codespaces</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"BotIcon\"\n                      tabler=\"IconRobot\"\n                      hugeicons=\"RoboticIcon\"\n                      phosphor=\"RobotIcon\"\n                      remixicon=\"RiRobotLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Copilot</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"SparklesIcon\"\n                      tabler=\"IconSparkles\"\n                      hugeicons=\"SparklesIcon\"\n                      phosphor=\"SparkleIcon\"\n                      remixicon=\"RiSparklingLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Spark</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <ItemSeparator />\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"SearchIcon\"\n                      tabler=\"IconSearch\"\n                      hugeicons=\"SearchIcon\"\n                      phosphor=\"MagnifyingGlassIcon\"\n                      remixicon=\"RiSearchLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Explore</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"ShoppingBagIcon\"\n                      tabler=\"IconShoppingBag\"\n                      hugeicons=\"ShoppingBasket01Icon\"\n                      phosphor=\"BagIcon\"\n                      remixicon=\"RiShoppingBagLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Marketplace</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"LinkIcon\"\n                      tabler=\"IconLink\"\n                      hugeicons=\"LinkIcon\"\n                      phosphor=\"LinkIcon\"\n                      remixicon=\"RiLinksLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>MCP registry</ItemTitle>\n                  </ItemContent>\n                </Item>\n              </ItemGroup>\n            </div>\n          </DrawerContent>\n        </Drawer>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <Button\n                variant=\"ghost\"\n                size=\"icon\"\n                className=\"ml-auto rounded-full\"\n              />\n            }\n          >\n            <Avatar>\n              <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"shadcn\" />\n              <AvatarFallback>SC</AvatarFallback>\n            </Avatar>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-56\" align=\"end\">\n            <DropdownMenuGroup>\n              <DropdownMenuLabel className=\"p-0 font-normal\">\n                <Item className=\"px-2 py-1 pb-0.5\" size=\"sm\">\n                  <ItemMedia>\n                    <Avatar>\n                      <AvatarImage\n                        src=\"https://github.com/shadcn.png\"\n                        alt=\"shadcn\"\n                      />\n                      <AvatarFallback>SC</AvatarFallback>\n                    </Avatar>\n                  </ItemMedia>\n                  <ItemContent className=\"gap-0\">\n                    <ItemTitle className=\"text-foreground text-sm\">\n                      shadcn\n                    </ItemTitle>\n                    <ItemDescription className=\"text-xs\">\n                      shadcn@example.com\n                    </ItemDescription>\n                  </ItemContent>\n                </Item>\n              </DropdownMenuLabel>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SmileIcon\"\n                  tabler=\"IconMoodSmile\"\n                  hugeicons=\"SmileIcon\"\n                  phosphor=\"SmileyIcon\"\n                  remixicon=\"RiEmotionLine\"\n                />\n                Set status\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CircleAlertIcon\"\n                  tabler=\"IconExclamationCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                  phosphor=\"WarningCircleIcon\"\n                  remixicon=\"RiErrorWarningLine\"\n                />\n                Single sign-on\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"UserIcon\"\n                  tabler=\"IconUser\"\n                  hugeicons=\"UserIcon\"\n                  phosphor=\"UserIcon\"\n                  remixicon=\"RiUserLine\"\n                />\n                Profile\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"FolderIcon\"\n                  tabler=\"IconFolder\"\n                  hugeicons=\"FolderIcon\"\n                  phosphor=\"FolderIcon\"\n                  remixicon=\"RiFolderLine\"\n                />\n                Repositories\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"StarIcon\"\n                  tabler=\"IconStar\"\n                  hugeicons=\"StarIcon\"\n                  phosphor=\"StarIcon\"\n                  remixicon=\"RiStarLine\"\n                />\n                Stars\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CodeIcon\"\n                  tabler=\"IconCode\"\n                  hugeicons=\"CodeIcon\"\n                  phosphor=\"CodeIcon\"\n                  remixicon=\"RiCodeLine\"\n                />\n                Gists\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"FolderIcon\"\n                  tabler=\"IconFolder\"\n                  hugeicons=\"FolderIcon\"\n                  phosphor=\"FolderIcon\"\n                  remixicon=\"RiFolderLine\"\n                />\n                Organizations\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"ServerIcon\"\n                  tabler=\"IconServer\"\n                  hugeicons=\"ServerStackIcon\"\n                  phosphor=\"HardDrivesIcon\"\n                  remixicon=\"RiHardDriveLine\"\n                />\n                Enterprises\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"HeartIcon\"\n                  tabler=\"IconHeart\"\n                  hugeicons=\"FavouriteIcon\"\n                  phosphor=\"HeartIcon\"\n                  remixicon=\"RiHeartLine\"\n                />\n                Sponsors\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SettingsIcon\"\n                  tabler=\"IconSettings\"\n                  hugeicons=\"SettingsIcon\"\n                  phosphor=\"GearIcon\"\n                  remixicon=\"RiSettingsLine\"\n                />\n                Settings\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"BotIcon\"\n                  tabler=\"IconRobot\"\n                  hugeicons=\"RoboticIcon\"\n                  phosphor=\"RobotIcon\"\n                  remixicon=\"RiRobotLine\"\n                />\n                Copilot settings\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SparklesIcon\"\n                  tabler=\"IconSparkles\"\n                  hugeicons=\"SparklesIcon\"\n                  phosphor=\"SparkleIcon\"\n                  remixicon=\"RiSparklingLine\"\n                />\n                Feature preview\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"MonitorIcon\"\n                  tabler=\"IconDeviceDesktop\"\n                  hugeicons=\"ComputerIcon\"\n                  phosphor=\"MonitorIcon\"\n                  remixicon=\"RiComputerLine\"\n                />\n                Appearance\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"UserIcon\"\n                  tabler=\"IconUser\"\n                  hugeicons=\"UserIcon\"\n                  phosphor=\"UserIcon\"\n                  remixicon=\"RiUserLine\"\n                />\n                Accessibility\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUpIcon\"\n                  phosphor=\"ArrowUpIcon\"\n                  remixicon=\"RiArrowUpLine\"\n                />\n                Upgrade\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"LogOutIcon\"\n                  tabler=\"IconLogout\"\n                  hugeicons=\"LogoutIcon\"\n                  phosphor=\"SignOutIcon\"\n                  remixicon=\"RiLogoutBoxLine\"\n                />\n                Sign out\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </header>\n    </Example>\n  )\n}\nconst usernames = [\n  \"shadcn\",\n  \"vercel\",\n  \"nextjs\",\n  \"tailwindlabs\",\n  \"typescript-lang\",\n  \"eslint\",\n  \"prettier\",\n  \"babel\",\n  \"webpack\",\n  \"rollup\",\n  \"parcel\",\n  \"vite\",\n  \"react\",\n  \"vue\",\n  \"angular\",\n  \"solid\",\n]\nfunction Contributors() {\n  return (\n    <Example title=\"Contributors\" className=\"items-center lg:p-16\">\n      <Card className=\"max-w-sm\">\n        <CardHeader>\n          <CardTitle>\n            Contributors <Badge variant=\"secondary\">312</Badge>\n          </CardTitle>\n        </CardHeader>\n        <CardContent>\n          <div className=\"flex flex-wrap gap-2\">\n            {usernames.map((username) => (\n              <Avatar key={username}>\n                <AvatarImage\n                  src={`https://github.com/${username}.png`}\n                  alt={username}\n                />\n                <AvatarFallback>{username.charAt(0)}</AvatarFallback>\n              </Avatar>\n            ))}\n          </div>\n        </CardContent>\n        <CardFooter>\n          <a href=\"#\" className=\"text-sm underline underline-offset-4\">\n            + 810 contributors\n          </a>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\nfunction Profile() {\n  return (\n    <Example title=\"Profile\" className=\"items-center justify-center\">\n      <Card className=\"mx-auto w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>Profile</CardTitle>\n          <CardDescription>Manage your profile information.</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form id=\"profile\">\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"name\">Name</FieldLabel>\n                <Input id=\"name\" placeholder=\"shadcn\" />\n                <FieldDescription>\n                  Your name may appear around GitHub where you contribute or are\n                  mentioned. You can remove it at any time.\n                </FieldDescription>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"email\">Public Email</FieldLabel>\n                <NativeSelect id=\"email\">\n                  <NativeSelectOption value=\"m@shadcn.com\">\n                    m@shadcn.com\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"m@gmail.com\">\n                    m@gmail.com\n                  </NativeSelectOption>\n                </NativeSelect>\n                <FieldDescription>\n                  You can manage verified email addresses in your{\" \"}\n                  <a href=\"#email-settings\">email settings</a>.\n                </FieldDescription>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"bio\">Bio</FieldLabel>\n                <Textarea\n                  id=\"bio\"\n                  placeholder=\"Tell us a little bit about yourself\"\n                />\n                <FieldDescription>\n                  You can <span>@mention</span> other users and organizations to\n                  link to them.\n                </FieldDescription>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button form=\"profile\">Save Profile</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\nfunction ContributionsActivity() {\n  return (\n    <Example title=\"Contributions Activity\" className=\"justify-center\">\n      <Card className=\"mx-auto w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>Contributions & Activity</CardTitle>\n          <CardDescription>\n            Manage your contributions and activity visibility.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form id=\"contributions-activity\">\n            <FieldGroup>\n              <FieldSet>\n                <FieldLegend className=\"sr-only\">\n                  Contributions & activity\n                </FieldLegend>\n                <FieldGroup className=\"gap-3\">\n                  <Field orientation=\"horizontal\">\n                    <Checkbox id=\"private-profile\" />\n                    <FieldContent>\n                      <FieldLabel\n                        htmlFor=\"private-profile\"\n                        className=\"font-normal\"\n                      >\n                        Make profile private and hide activity\n                      </FieldLabel>\n                      <FieldDescription>\n                        Enabling this will hide your contributions and activity\n                        from your GitHub profile and from social features like\n                        followers, stars, feeds, leaderboards and releases.\n                      </FieldDescription>\n                    </FieldContent>\n                  </Field>\n                  <Field orientation=\"horizontal\">\n                    <Checkbox id=\"private-contributions\" defaultChecked />\n                    <FieldContent>\n                      <FieldLabel\n                        htmlFor=\"private-contributions\"\n                        className=\"font-normal\"\n                      >\n                        Include private contributions on my profile\n                      </FieldLabel>\n                      <FieldDescription>\n                        Your contribution graph, achievements, and activity\n                        overview will show your private contributions without\n                        revealing any repository or organization information.{\" \"}\n                        <a href=\"#read-more\">Read more</a>.\n                      </FieldDescription>\n                    </FieldContent>\n                  </Field>\n                </FieldGroup>\n              </FieldSet>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button form=\"contributions-activity\">Save Changes</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\nconst users = [\n  \"shadcn\",\n  \"maxleiter\",\n  \"evilrabbit\",\n  \"pranathip\",\n  \"jorgezreik\",\n  \"shuding\",\n  \"rauchg\",\n]\nfunction AssignIssue() {\n  const anchor = useComboboxAnchor()\n  return (\n    <Example title=\"User Select\" className=\"items-center justify-center\">\n      <Card className=\"w-full max-w-sm\" size=\"sm\">\n        <CardHeader className=\"border-b\">\n          <CardTitle className=\"text-sm\">Assign Issue</CardTitle>\n          <CardDescription className=\"text-sm\">\n            Select users to assign to this issue.\n          </CardDescription>\n          <CardAction>\n            <Tooltip>\n              <TooltipTrigger\n                render={<Button variant=\"outline\" size=\"icon-xs\" />}\n              >\n                <IconPlaceholder\n                  lucide=\"PlusIcon\"\n                  tabler=\"IconPlus\"\n                  hugeicons=\"PlusSignIcon\"\n                  phosphor=\"PlusIcon\"\n                  remixicon=\"RiAddLine\"\n                />\n              </TooltipTrigger>\n              <TooltipContent>Add user</TooltipContent>\n            </Tooltip>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <Combobox\n            multiple\n            autoHighlight\n            items={users}\n            defaultValue={[users[0]]}\n          >\n            <ComboboxChips ref={anchor}>\n              <ComboboxValue>\n                {(values) => (\n                  <React.Fragment>\n                    {values.map((username: string) => (\n                      <ComboboxChip key={username}>\n                        <Avatar className=\"size-4\">\n                          <AvatarImage\n                            src={`https://github.com/${username}.png`}\n                            alt={username}\n                          />\n                          <AvatarFallback>{username.charAt(0)}</AvatarFallback>\n                        </Avatar>\n                        {username}\n                      </ComboboxChip>\n                    ))}\n                    <ComboboxChipsInput\n                      placeholder={\n                        values.length > 0 ? undefined : \"Select a item...\"\n                      }\n                    />\n                  </React.Fragment>\n                )}\n              </ComboboxValue>\n            </ComboboxChips>\n            <ComboboxContent anchor={anchor}>\n              <ComboboxEmpty>No users found.</ComboboxEmpty>\n              <ComboboxList>\n                {(username) => (\n                  <ComboboxItem key={username} value={username}>\n                    <Avatar className=\"size-5\">\n                      <AvatarImage\n                        src={`https://github.com/${username}.png`}\n                        alt={username}\n                      />\n                      <AvatarFallback>{username.charAt(0)}</AvatarFallback>\n                    </Avatar>\n                    {username}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/github.json b/apps/v4/public/r/styles/base-nova/github.json
index 60d6513286..f89ca2866e 100644
--- a/apps/v4/public/r/styles/base-nova/github.json
+++ b/apps/v4/public/r/styles/base-nova/github.json
@@ -30,7 +30,7 @@
   "files": [
     {
       "path": "registry/base-nova/blocks/github.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-nova/components/example\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/base-nova/ui/avatar\"\nimport { Badge } from \"@/registry/base-nova/ui/badge\"\nimport { Button } from \"@/registry/base-nova/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-nova/ui/card\"\nimport { Checkbox } from \"@/registry/base-nova/ui/checkbox\"\nimport {\n  Combobox,\n  ComboboxChip,\n  ComboboxChips,\n  ComboboxChipsInput,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxItem,\n  ComboboxList,\n  ComboboxValue,\n  useComboboxAnchor,\n} from \"@/registry/base-nova/ui/combobox\"\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"@/registry/base-nova/ui/command\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/base-nova/ui/drawer\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-nova/ui/dropdown-menu\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/base-nova/ui/empty\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n} from \"@/registry/base-nova/ui/field\"\nimport { Input } from \"@/registry/base-nova/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupTextarea,\n} from \"@/registry/base-nova/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemGroup,\n  ItemMedia,\n  ItemSeparator,\n  ItemTitle,\n} from \"@/registry/base-nova/ui/item\"\nimport { Kbd } from \"@/registry/base-nova/ui/kbd\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/base-nova/ui/native-select\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/base-nova/ui/popover\"\nimport { Separator } from \"@/registry/base-nova/ui/separator\"\nimport { Spinner } from \"@/registry/base-nova/ui/spinner\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/base-nova/ui/tabs\"\nimport { Textarea } from \"@/registry/base-nova/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/base-nova/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function GithubBlock() {\n  return (\n    <ExampleWrapper>\n      <CodespacesCard />\n      <AssignIssue />\n      <Navbar />\n      <RepositoryToolbar />\n      <Profile />\n      <ContributionsActivity />\n      <Contributors />\n    </ExampleWrapper>\n  )\n}\nfunction CodespacesCard() {\n  const [isCreatingCodespace, setIsCreatingCodespace] = React.useState(false)\n  return (\n    <Example title=\"Codespaces\" className=\"min-h-[550px] lg:p-12\">\n      <Card className=\"mx-auto w-full max-w-sm\" size=\"sm\">\n        <CardContent>\n          <Tabs defaultValue=\"codespaces\">\n            <TabsList className=\"w-full\">\n              <TabsTrigger value=\"codespaces\">Codespaces</TabsTrigger>\n              <TabsTrigger value=\"local\">Local</TabsTrigger>\n            </TabsList>\n            <TabsContent value=\"codespaces\">\n              <Item size=\"sm\" className=\"px-1 pt-2\">\n                <ItemContent>\n                  <ItemTitle>Codespaces</ItemTitle>\n                  <ItemDescription>\n                    Your workspaces in the cloud\n                  </ItemDescription>\n                </ItemContent>\n                <ItemActions>\n                  <Tooltip>\n                    <TooltipTrigger\n                      render={<Button variant=\"ghost\" size=\"icon-sm\" />}\n                    >\n                      <IconPlaceholder\n                        lucide=\"PlusIcon\"\n                        tabler=\"IconPlus\"\n                        hugeicons=\"PlusSignIcon\"\n                        phosphor=\"PlusIcon\"\n                        remixicon=\"RiAddLine\"\n                      />\n                    </TooltipTrigger>\n                    <TooltipContent side=\"bottom\">\n                      Create a codespace on main\n                    </TooltipContent>\n                  </Tooltip>\n                  <DropdownMenu>\n                    <Tooltip>\n                      <TooltipTrigger\n                        render={\n                          <DropdownMenuTrigger\n                            render={<Button variant=\"ghost\" size=\"icon-sm\" />}\n                          />\n                        }\n                      >\n                        <IconPlaceholder\n                          lucide=\"MoreHorizontalIcon\"\n                          tabler=\"IconDots\"\n                          hugeicons=\"MoreHorizontalCircle01Icon\"\n                          phosphor=\"DotsThreeOutlineIcon\"\n                          remixicon=\"RiMoreLine\"\n                        />\n                      </TooltipTrigger>\n                      <TooltipContent side=\"bottom\">\n                        Codespace repository configuration\n                      </TooltipContent>\n                    </Tooltip>\n                    <DropdownMenuContent align=\"end\" className=\"w-56\">\n                      <DropdownMenuGroup>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"PlusIcon\"\n                            tabler=\"IconPlus\"\n                            hugeicons=\"PlusSignIcon\"\n                            phosphor=\"PlusIcon\"\n                            remixicon=\"RiAddLine\"\n                          />\n                          New with options...\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"ContainerIcon\"\n                            tabler=\"IconBox\"\n                            hugeicons=\"CubeIcon\"\n                            phosphor=\"CubeIcon\"\n                            remixicon=\"RiBox1Line\"\n                          />\n                          Configure dev container\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"ZapIcon\"\n                            tabler=\"IconBolt\"\n                            hugeicons=\"ZapIcon\"\n                            phosphor=\"LightningIcon\"\n                            remixicon=\"RiFlashlightLine\"\n                          />\n                          Set up prebuilds\n                        </DropdownMenuItem>\n                      </DropdownMenuGroup>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuGroup>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"ServerIcon\"\n                            tabler=\"IconServer\"\n                            hugeicons=\"ServerStackIcon\"\n                            phosphor=\"HardDrivesIcon\"\n                            remixicon=\"RiHardDriveLine\"\n                          />\n                          Manage codespaces\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"ShareIcon\"\n                            tabler=\"IconShare2\"\n                            hugeicons=\"Share03Icon\"\n                            phosphor=\"ShareIcon\"\n                            remixicon=\"RiShareLine\"\n                          />\n                          Share deep link\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"InfoIcon\"\n                            tabler=\"IconInfoCircle\"\n                            hugeicons=\"AlertCircleIcon\"\n                            phosphor=\"InfoIcon\"\n                            remixicon=\"RiInformationLine\"\n                          />\n                          What are codespaces?\n                        </DropdownMenuItem>\n                      </DropdownMenuGroup>\n                    </DropdownMenuContent>\n                  </DropdownMenu>\n                </ItemActions>\n              </Item>\n              <Separator className=\"-mx-2 my-2 w-auto!\" />\n              <Empty className=\"p-4\">\n                <EmptyHeader>\n                  <EmptyMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"ServerIcon\"\n                      tabler=\"IconServer\"\n                      hugeicons=\"ServerStackIcon\"\n                      phosphor=\"HardDrivesIcon\"\n                      remixicon=\"RiHardDriveLine\"\n                    />\n                  </EmptyMedia>\n                  <EmptyTitle>No codespaces</EmptyTitle>\n                  <EmptyDescription>\n                    You don&apos;t have any codespaces with this repository\n                    checked out\n                  </EmptyDescription>\n                </EmptyHeader>\n                <EmptyContent>\n                  <Button\n                    size=\"sm\"\n                    onClick={() => {\n                      setIsCreatingCodespace(true)\n                      setTimeout(() => {\n                        setIsCreatingCodespace(false)\n                      }, 2000)\n                    }}\n                    disabled={isCreatingCodespace}\n                  >\n                    {isCreatingCodespace ? (\n                      <Spinner data-icon=\"inline-start\" />\n                    ) : (\n                      \"\"\n                    )}\n                    Create Codespace\n                  </Button>\n                  <a\n                    href=\"#learn-more\"\n                    className=\"text-muted-foreground text-xs underline underline-offset-4\"\n                  >\n                    Learn more about codespaces\n                  </a>\n                </EmptyContent>\n              </Empty>\n              <Separator className=\"-mx-2 my-2 w-auto!\" />\n              <div className=\"text-muted-foreground p-1.5 text-xs\">\n                Codespace usage for this repository is paid for by{\" \"}\n                <span className=\"font-medium\">shadcn</span>.\n              </div>\n            </TabsContent>\n            <TabsContent value=\"local\">\n              <Item size=\"sm\" className=\"hidden p-0\">\n                <ItemContent>\n                  <ItemTitle className=\"gap-2\">\n                    <IconPlaceholder\n                      lucide=\"TerminalIcon\"\n                      tabler=\"IconTerminal\"\n                      hugeicons=\"ComputerTerminal01Icon\"\n                      phosphor=\"TerminalIcon\"\n                      remixicon=\"RiTerminalBoxLine\"\n                      className=\"size-4\"\n                    />\n                    Clone\n                  </ItemTitle>\n                </ItemContent>\n                <ItemActions>\n                  <Tooltip>\n                    <TooltipTrigger\n                      render={<Button variant=\"ghost\" size=\"icon\" />}\n                    >\n                      <IconPlaceholder\n                        lucide=\"InfoIcon\"\n                        tabler=\"IconInfoCircle\"\n                        hugeicons=\"AlertCircleIcon\"\n                        phosphor=\"InfoIcon\"\n                        remixicon=\"RiInformationLine\"\n                      />\n                    </TooltipTrigger>\n                    <TooltipContent side=\"left\">\n                      Which remote URL should I use?\n                    </TooltipContent>\n                  </Tooltip>\n                </ItemActions>\n              </Item>\n              <Tabs defaultValue=\"https\">\n                <TabsList\n                  variant=\"line\"\n                  className=\"w-full justify-start border-b *:[button]:flex-0\"\n                >\n                  <TabsTrigger value=\"https\">HTTPS</TabsTrigger>\n                  <TabsTrigger value=\"ssh\">SSH</TabsTrigger>\n                  <TabsTrigger value=\"cli\">GitHub CLI</TabsTrigger>\n                </TabsList>\n                <div className=\"bg-muted/30 rounded-md border p-2\">\n                  <TabsContent value=\"https\">\n                    <Field className=\"gap-2\">\n                      <FieldLabel htmlFor=\"https-url\" className=\"sr-only\">\n                        HTTPS URL\n                      </FieldLabel>\n                      <InputGroup>\n                        <InputGroupAddon align=\"inline-end\">\n                          <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                              phosphor=\"CopyIcon\"\n                              remixicon=\"RiFileCopyLine\"\n                            />\n                          </InputGroupButton>\n                        </InputGroupAddon>\n                        <InputGroupInput\n                          id=\"https-url\"\n                          defaultValue=\"https://github.com/shadcn-ui/ui.git\"\n                          readOnly\n                        />\n                      </InputGroup>\n                      <FieldDescription>\n                        Clone using the web URL.\n                      </FieldDescription>\n                    </Field>\n                  </TabsContent>\n                  <TabsContent value=\"ssh\">\n                    <Field className=\"gap-2\">\n                      <FieldLabel htmlFor=\"ssh-url\" className=\"sr-only\">\n                        SSH URL\n                      </FieldLabel>\n                      <InputGroup>\n                        <InputGroupAddon align=\"inline-end\">\n                          <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                              phosphor=\"CopyIcon\"\n                              remixicon=\"RiFileCopyLine\"\n                            />\n                          </InputGroupButton>\n                        </InputGroupAddon>\n                        <InputGroupInput\n                          id=\"ssh-url\"\n                          defaultValue=\"git@github.com:shadcn-ui/ui.git\"\n                          readOnly\n                        />\n                      </InputGroup>\n                      <FieldDescription>\n                        Use a password-protected SSH key.\n                      </FieldDescription>\n                    </Field>\n                  </TabsContent>\n                  <TabsContent value=\"cli\">\n                    <Field className=\"gap-2\">\n                      <FieldLabel htmlFor=\"cli-command\" className=\"sr-only\">\n                        CLI Command\n                      </FieldLabel>\n                      <InputGroup>\n                        <InputGroupAddon align=\"inline-end\">\n                          <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                              phosphor=\"CopyIcon\"\n                              remixicon=\"RiFileCopyLine\"\n                            />\n                          </InputGroupButton>\n                        </InputGroupAddon>\n                        <InputGroupInput\n                          id=\"cli-command\"\n                          defaultValue=\"gh repo clone shadcn-ui/ui\"\n                          readOnly\n                        />\n                      </InputGroup>\n                      <FieldDescription>\n                        Work fast with our official CLI.{\" \"}\n                        <a href=\"#learn-more\">Learn more</a>\n                      </FieldDescription>\n                    </Field>\n                  </TabsContent>\n                </div>\n              </Tabs>\n              <Separator className=\"-mx-2 my-2 w-auto!\" />\n              <div className=\"flex flex-col\">\n                <Button\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  className=\"justify-start gap-1.5\"\n                >\n                  <IconPlaceholder\n                    lucide=\"MonitorIcon\"\n                    tabler=\"IconDeviceDesktop\"\n                    hugeicons=\"ComputerIcon\"\n                    phosphor=\"MonitorIcon\"\n                    remixicon=\"RiComputerLine\"\n                    data-icon=\"inline-start\"\n                  />\n                  Open with GitHub Desktop\n                </Button>\n                <Button\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  className=\"justify-start gap-1.5\"\n                >\n                  <IconPlaceholder\n                    lucide=\"DownloadIcon\"\n                    tabler=\"IconDownload\"\n                    hugeicons=\"DownloadIcon\"\n                    phosphor=\"DownloadIcon\"\n                    remixicon=\"RiDownloadLine\"\n                    data-icon=\"inline-start\"\n                  />\n                  Download ZIP\n                </Button>\n              </div>\n            </TabsContent>\n          </Tabs>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\nfunction RepositoryToolbar() {\n  const [selectedBranch, setSelectedBranch] = React.useState(\"main\")\n  return (\n    <Example title=\"Repository Toolbar\">\n      <div className=\"flex items-center gap-2\">\n        <InputGroup>\n          <InputGroupInput placeholder=\"Go to file\" />\n          <InputGroupAddon align=\"inline-start\">\n            <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n              <IconPlaceholder\n                lucide=\"SearchIcon\"\n                tabler=\"IconSearch\"\n                hugeicons=\"SearchIcon\"\n                phosphor=\"MagnifyingGlassIcon\"\n                remixicon=\"RiSearchLine\"\n              />\n            </InputGroupButton>\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">\n            <Kbd>t</Kbd>\n          </InputGroupAddon>\n        </InputGroup>\n        <DropdownMenu>\n          <DropdownMenuTrigger render={<Button variant=\"outline\" />}>\n            Add File\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDown01Icon\"\n              phosphor=\"CaretDownIcon\"\n              remixicon=\"RiArrowDownSLine\"\n              data-icon=\"inline-end\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"PlusIcon\"\n                  tabler=\"IconPlus\"\n                  hugeicons=\"PlusSignIcon\"\n                  phosphor=\"PlusIcon\"\n                  remixicon=\"RiAddLine\"\n                />\n                Create new file\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"UploadIcon\"\n                  hugeicons=\"Upload01Icon\"\n                  tabler=\"IconUpload\"\n                  phosphor=\"UploadIcon\"\n                  remixicon=\"RiUploadLine\"\n                />\n                Upload files\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <Popover>\n          <Tooltip>\n            <TooltipTrigger\n              render={\n                <PopoverTrigger\n                  render={<Button variant=\"outline\" size=\"icon\" />}\n                />\n              }\n            >\n              <IconPlaceholder\n                lucide=\"CloudCogIcon\"\n                hugeicons=\"AiCloud01Icon\"\n                tabler=\"IconCloudCog\"\n                phosphor=\"CloudArrowUpIcon\"\n                remixicon=\"RiUploadCloudLine\"\n              />\n            </TooltipTrigger>\n            <TooltipContent>New Agent Task</TooltipContent>\n          </Tooltip>\n          <PopoverContent side=\"bottom\" align=\"end\" className=\"w-96\">\n            <Field>\n              <FieldLabel htmlFor=\"new-agent-task\">New Agent Task</FieldLabel>\n              <InputGroup>\n                <InputGroupTextarea placeholder=\"Describe your task in natural language.\"></InputGroupTextarea>\n                <InputGroupAddon align=\"block-end\">\n                  <Popover>\n                    <Tooltip>\n                      <PopoverTrigger\n                        render={\n                          <TooltipTrigger\n                            render={\n                              <InputGroupButton\n                                variant=\"outline\"\n                                size=\"icon-sm\"\n                              />\n                            }\n                          />\n                        }\n                      >\n                        <IconPlaceholder\n                          lucide=\"GitBranchIcon\"\n                          hugeicons=\"GitBranchIcon\"\n                          tabler=\"IconGitBranch\"\n                          phosphor=\"GitBranchIcon\"\n                          remixicon=\"RiGitBranchLine\"\n                        />\n                      </PopoverTrigger>\n                      <TooltipContent>Select a branch</TooltipContent>\n                    </Tooltip>\n                    <PopoverContent side=\"bottom\" align=\"start\" className=\"p-1\">\n                      <Field>\n                        <FieldLabel htmlFor=\"select-branch\" className=\"sr-only\">\n                          Select a Branch\n                        </FieldLabel>\n                        <Command>\n                          <CommandInput\n                            id=\"select-branch\"\n                            placeholder=\"Find a branch\"\n                          />\n                          <CommandEmpty>No branches found</CommandEmpty>\n                          <CommandList>\n                            <CommandGroup>\n                              {[\n                                \"main\",\n                                \"develop\",\n                                \"feature/123\",\n                                \"feature/user-authentication\",\n                                \"feature/dashboard-redesign\",\n                                \"bugfix/login-error\",\n                                \"hotfix/security-patch\",\n                                \"release/v2.0.0\",\n                                \"feature/api-integration\",\n                                \"bugfix/memory-leak\",\n                                \"feature/dark-mode\",\n                                \"feature/responsive-design\",\n                                \"bugfix/typo-fix\",\n                                \"feature/search-functionality\",\n                                \"release/v1.9.0\",\n                                \"feature/notifications\",\n                                \"bugfix/cache-issue\",\n                                \"feature/payment-gateway\",\n                                \"hotfix/critical-bug\",\n                                \"feature/admin-panel\",\n                                \"bugfix/validation-error\",\n                                \"feature/analytics\",\n                                \"release/v2.1.0\",\n                              ].map((branch) => (\n                                <CommandItem\n                                  key={branch}\n                                  value={branch}\n                                  onSelect={() => setSelectedBranch(branch)}\n                                  data-checked={selectedBranch === branch}\n                                >\n                                  {branch}\n                                </CommandItem>\n                              ))}\n                            </CommandGroup>\n                          </CommandList>\n                        </Command>\n                      </Field>\n                    </PopoverContent>\n                  </Popover>\n                  <Popover>\n                    <Tooltip>\n                      <PopoverTrigger\n                        render={\n                          <TooltipTrigger\n                            render={\n                              <InputGroupButton\n                                variant=\"outline\"\n                                size=\"icon-sm\"\n                              />\n                            }\n                          />\n                        }\n                      >\n                        <IconPlaceholder\n                          lucide=\"BotIcon\"\n                          hugeicons=\"RoboticIcon\"\n                          tabler=\"IconRobot\"\n                          phosphor=\"RobotIcon\"\n                          remixicon=\"RiRobotLine\"\n                        />\n                      </PopoverTrigger>\n                      <TooltipContent>Select Agent</TooltipContent>\n                    </Tooltip>\n                    <PopoverContent side=\"bottom\" align=\"start\">\n                      <Empty className=\"gap-4 p-0\">\n                        <EmptyHeader>\n                          <EmptyTitle className=\"text-sm\">\n                            This repository has no custom agents\n                          </EmptyTitle>\n                          <EmptyDescription className=\"text-xs\">\n                            Custom agents are reusable instructions and tools in\n                            your repository.\n                          </EmptyDescription>\n                        </EmptyHeader>\n                        <EmptyContent>\n                          <Button variant=\"outline\" size=\"sm\">\n                            Create Custom Agent\n                          </Button>\n                        </EmptyContent>\n                      </Empty>\n                    </PopoverContent>\n                  </Popover>\n                  <Tooltip>\n                    <TooltipTrigger\n                      render={\n                        <InputGroupButton\n                          variant=\"ghost\"\n                          size=\"icon-sm\"\n                          className=\"ml-auto\"\n                        />\n                      }\n                    >\n                      <IconPlaceholder\n                        lucide=\"SendIcon\"\n                        hugeicons=\"SentIcon\"\n                        tabler=\"IconSend\"\n                        phosphor=\"PaperPlaneTiltIcon\"\n                        remixicon=\"RiSendPlaneLine\"\n                      />\n                    </TooltipTrigger>\n                    <TooltipContent className=\"flex items-center gap-2 pr-2\">\n                      Start Task <Kbd>⏎</Kbd>\n                    </TooltipContent>\n                  </Tooltip>\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n          </PopoverContent>\n        </Popover>\n      </div>\n    </Example>\n  )\n}\nfunction Navbar() {\n  return (\n    <Example title=\"Account Menu\">\n      <header className=\"flex h-14 w-full items-center gap-2\">\n        <Drawer direction=\"left\">\n          <DrawerTrigger asChild>\n            <Button variant=\"outline\" size=\"icon\">\n              <IconPlaceholder\n                lucide=\"MenuIcon\"\n                hugeicons=\"Menu09Icon\"\n                tabler=\"IconMenu\"\n                phosphor=\"ListIcon\"\n                remixicon=\"RiListUnordered\"\n              />\n              <span className=\"sr-only\">Open menu</span>\n            </Button>\n          </DrawerTrigger>\n          <DrawerContent className=\"max-w-72\">\n            <DrawerHeader className=\"flex flex-row items-center justify-between px-5 pb-0\">\n              <DrawerTitle>Menu</DrawerTitle>\n              <DrawerClose asChild>\n                <Button variant=\"ghost\" size=\"icon-sm\" >\n                  <IconPlaceholder\n                    lucide=\"XIcon\"\n                    tabler=\"IconX\"\n                    hugeicons=\"Cancel01Icon\"\n                    phosphor=\"XIcon\"\n                    remixicon=\"RiCloseLine\"\n                  />\n                  <span className=\"sr-only\">Close</span>\n                </Button>\n              </DrawerClose>\n            </DrawerHeader>\n            <div className=\"p-2\">\n              <ItemGroup className=\"gap-px\">\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"HomeIcon\"\n                      tabler=\"IconHome\"\n                      hugeicons=\"HomeIcon\"\n                      phosphor=\"HouseIcon\"\n                      remixicon=\"RiHomeLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Home</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"CircleIcon\"\n                      tabler=\"IconCircle\"\n                      hugeicons=\"CircleIcon\"\n                      phosphor=\"CircleIcon\"\n                      remixicon=\"RiCircleLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Issues</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"GitBranchIcon\"\n                      tabler=\"IconGitBranch\"\n                      hugeicons=\"GitBranchIcon\"\n                      phosphor=\"GitBranchIcon\"\n                      remixicon=\"RiGitBranchLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Pull requests</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"LayoutGridIcon\"\n                      tabler=\"IconLayoutGrid\"\n                      hugeicons=\"GridIcon\"\n                      phosphor=\"GridFourIcon\"\n                      remixicon=\"RiGridLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Projects</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"MailIcon\"\n                      tabler=\"IconMail\"\n                      hugeicons=\"MailIcon\"\n                      phosphor=\"EnvelopeIcon\"\n                      remixicon=\"RiMailLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Discussions</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"ServerIcon\"\n                      tabler=\"IconServer\"\n                      hugeicons=\"ServerStackIcon\"\n                      phosphor=\"HardDrivesIcon\"\n                      remixicon=\"RiHardDriveLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Codespaces</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"BotIcon\"\n                      tabler=\"IconRobot\"\n                      hugeicons=\"RoboticIcon\"\n                      phosphor=\"RobotIcon\"\n                      remixicon=\"RiRobotLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Copilot</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"SparklesIcon\"\n                      tabler=\"IconSparkles\"\n                      hugeicons=\"SparklesIcon\"\n                      phosphor=\"SparkleIcon\"\n                      remixicon=\"RiSparklingLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Spark</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <ItemSeparator />\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"SearchIcon\"\n                      tabler=\"IconSearch\"\n                      hugeicons=\"SearchIcon\"\n                      phosphor=\"MagnifyingGlassIcon\"\n                      remixicon=\"RiSearchLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Explore</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"ShoppingBagIcon\"\n                      tabler=\"IconShoppingBag\"\n                      hugeicons=\"ShoppingBasket01Icon\"\n                      phosphor=\"BagIcon\"\n                      remixicon=\"RiShoppingBagLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Marketplace</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"LinkIcon\"\n                      tabler=\"IconLink\"\n                      hugeicons=\"LinkIcon\"\n                      phosphor=\"LinkIcon\"\n                      remixicon=\"RiLinksLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>MCP registry</ItemTitle>\n                  </ItemContent>\n                </Item>\n              </ItemGroup>\n            </div>\n          </DrawerContent>\n        </Drawer>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <Button\n                variant=\"ghost\"\n                size=\"icon\"\n                className=\"ml-auto rounded-full\"\n              />\n            }\n          >\n            <Avatar>\n              <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"shadcn\" />\n              <AvatarFallback>SC</AvatarFallback>\n            </Avatar>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-56\" align=\"end\">\n            <DropdownMenuGroup>\n              <DropdownMenuLabel className=\"p-0 font-normal\">\n                <Item className=\"px-2 py-1 pb-0.5\" size=\"sm\">\n                  <ItemMedia>\n                    <Avatar>\n                      <AvatarImage\n                        src=\"https://github.com/shadcn.png\"\n                        alt=\"shadcn\"\n                      />\n                      <AvatarFallback>SC</AvatarFallback>\n                    </Avatar>\n                  </ItemMedia>\n                  <ItemContent className=\"gap-0\">\n                    <ItemTitle className=\"text-foreground text-sm\">\n                      shadcn\n                    </ItemTitle>\n                    <ItemDescription className=\"text-xs\">\n                      shadcn@example.com\n                    </ItemDescription>\n                  </ItemContent>\n                </Item>\n              </DropdownMenuLabel>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SmileIcon\"\n                  tabler=\"IconMoodSmile\"\n                  hugeicons=\"SmileIcon\"\n                  phosphor=\"SmileyIcon\"\n                  remixicon=\"RiEmotionLine\"\n                />\n                Set status\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CircleAlertIcon\"\n                  tabler=\"IconExclamationCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                  phosphor=\"WarningCircleIcon\"\n                  remixicon=\"RiErrorWarningLine\"\n                />\n                Single sign-on\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"UserIcon\"\n                  tabler=\"IconUser\"\n                  hugeicons=\"UserIcon\"\n                  phosphor=\"UserIcon\"\n                  remixicon=\"RiUserLine\"\n                />\n                Profile\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"FolderIcon\"\n                  tabler=\"IconFolder\"\n                  hugeicons=\"FolderIcon\"\n                  phosphor=\"FolderIcon\"\n                  remixicon=\"RiFolderLine\"\n                />\n                Repositories\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"StarIcon\"\n                  tabler=\"IconStar\"\n                  hugeicons=\"StarIcon\"\n                  phosphor=\"StarIcon\"\n                  remixicon=\"RiStarLine\"\n                />\n                Stars\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CodeIcon\"\n                  tabler=\"IconCode\"\n                  hugeicons=\"CodeIcon\"\n                  phosphor=\"CodeIcon\"\n                  remixicon=\"RiCodeLine\"\n                />\n                Gists\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"FolderIcon\"\n                  tabler=\"IconFolder\"\n                  hugeicons=\"FolderIcon\"\n                  phosphor=\"FolderIcon\"\n                  remixicon=\"RiFolderLine\"\n                />\n                Organizations\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"ServerIcon\"\n                  tabler=\"IconServer\"\n                  hugeicons=\"ServerStackIcon\"\n                  phosphor=\"HardDrivesIcon\"\n                  remixicon=\"RiHardDriveLine\"\n                />\n                Enterprises\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"HeartIcon\"\n                  tabler=\"IconHeart\"\n                  hugeicons=\"FavouriteIcon\"\n                  phosphor=\"HeartIcon\"\n                  remixicon=\"RiHeartLine\"\n                />\n                Sponsors\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SettingsIcon\"\n                  tabler=\"IconSettings\"\n                  hugeicons=\"SettingsIcon\"\n                  phosphor=\"GearIcon\"\n                  remixicon=\"RiSettingsLine\"\n                />\n                Settings\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"BotIcon\"\n                  tabler=\"IconRobot\"\n                  hugeicons=\"RoboticIcon\"\n                  phosphor=\"RobotIcon\"\n                  remixicon=\"RiRobotLine\"\n                />\n                Copilot settings\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SparklesIcon\"\n                  tabler=\"IconSparkles\"\n                  hugeicons=\"SparklesIcon\"\n                  phosphor=\"SparkleIcon\"\n                  remixicon=\"RiSparklingLine\"\n                />\n                Feature preview\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"MonitorIcon\"\n                  tabler=\"IconDeviceDesktop\"\n                  hugeicons=\"ComputerIcon\"\n                  phosphor=\"MonitorIcon\"\n                  remixicon=\"RiComputerLine\"\n                />\n                Appearance\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"UserIcon\"\n                  tabler=\"IconUser\"\n                  hugeicons=\"UserIcon\"\n                  phosphor=\"UserIcon\"\n                  remixicon=\"RiUserLine\"\n                />\n                Accessibility\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUpIcon\"\n                  phosphor=\"ArrowUpIcon\"\n                  remixicon=\"RiArrowUpLine\"\n                />\n                Upgrade\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"LogOutIcon\"\n                  tabler=\"IconLogout\"\n                  hugeicons=\"LogoutIcon\"\n                  phosphor=\"SignOutIcon\"\n                  remixicon=\"RiLogoutBoxLine\"\n                />\n                Sign out\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </header>\n    </Example>\n  )\n}\nconst usernames = [\n  \"shadcn\",\n  \"vercel\",\n  \"nextjs\",\n  \"tailwindlabs\",\n  \"typescript-lang\",\n  \"eslint\",\n  \"prettier\",\n  \"babel\",\n  \"webpack\",\n  \"rollup\",\n  \"parcel\",\n  \"vite\",\n  \"react\",\n  \"vue\",\n  \"angular\",\n  \"solid\",\n]\nfunction Contributors() {\n  return (\n    <Example title=\"Contributors\" className=\"items-center lg:p-16\">\n      <Card className=\"max-w-sm\">\n        <CardHeader>\n          <CardTitle>\n            Contributors <Badge variant=\"secondary\">312</Badge>\n          </CardTitle>\n        </CardHeader>\n        <CardContent>\n          <div className=\"flex flex-wrap gap-2\">\n            {usernames.map((username) => (\n              <Avatar key={username}>\n                <AvatarImage\n                  src={`https://github.com/${username}.png`}\n                  alt={username}\n                />\n                <AvatarFallback>{username.charAt(0)}</AvatarFallback>\n              </Avatar>\n            ))}\n          </div>\n        </CardContent>\n        <CardFooter>\n          <a href=\"#\" className=\"text-sm underline underline-offset-4\">\n            + 810 contributors\n          </a>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\nfunction Profile() {\n  return (\n    <Example title=\"Profile\" className=\"items-center justify-center\">\n      <Card className=\"mx-auto w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>Profile</CardTitle>\n          <CardDescription>Manage your profile information.</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form id=\"profile\">\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"name\">Name</FieldLabel>\n                <Input id=\"name\" placeholder=\"shadcn\" />\n                <FieldDescription>\n                  Your name may appear around GitHub where you contribute or are\n                  mentioned. You can remove it at any time.\n                </FieldDescription>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"email\">Public Email</FieldLabel>\n                <NativeSelect id=\"email\">\n                  <NativeSelectOption value=\"m@shadcn.com\">\n                    m@shadcn.com\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"m@gmail.com\">\n                    m@gmail.com\n                  </NativeSelectOption>\n                </NativeSelect>\n                <FieldDescription>\n                  You can manage verified email addresses in your{\" \"}\n                  <a href=\"#email-settings\">email settings</a>.\n                </FieldDescription>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"bio\">Bio</FieldLabel>\n                <Textarea\n                  id=\"bio\"\n                  placeholder=\"Tell us a little bit about yourself\"\n                />\n                <FieldDescription>\n                  You can <span>@mention</span> other users and organizations to\n                  link to them.\n                </FieldDescription>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button form=\"profile\">Save Profile</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\nfunction ContributionsActivity() {\n  return (\n    <Example title=\"Contributions Activity\" className=\"justify-center\">\n      <Card className=\"mx-auto w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>Contributions & Activity</CardTitle>\n          <CardDescription>\n            Manage your contributions and activity visibility.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form id=\"contributions-activity\">\n            <FieldGroup>\n              <FieldSet>\n                <FieldLegend className=\"sr-only\">\n                  Contributions & activity\n                </FieldLegend>\n                <FieldGroup className=\"gap-3\">\n                  <Field orientation=\"horizontal\">\n                    <Checkbox id=\"private-profile\" />\n                    <FieldContent>\n                      <FieldLabel\n                        htmlFor=\"private-profile\"\n                        className=\"font-normal\"\n                      >\n                        Make profile private and hide activity\n                      </FieldLabel>\n                      <FieldDescription>\n                        Enabling this will hide your contributions and activity\n                        from your GitHub profile and from social features like\n                        followers, stars, feeds, leaderboards and releases.\n                      </FieldDescription>\n                    </FieldContent>\n                  </Field>\n                  <Field orientation=\"horizontal\">\n                    <Checkbox id=\"private-contributions\" defaultChecked />\n                    <FieldContent>\n                      <FieldLabel\n                        htmlFor=\"private-contributions\"\n                        className=\"font-normal\"\n                      >\n                        Include private contributions on my profile\n                      </FieldLabel>\n                      <FieldDescription>\n                        Your contribution graph, achievements, and activity\n                        overview will show your private contributions without\n                        revealing any repository or organization information.{\" \"}\n                        <a href=\"#read-more\">Read more</a>.\n                      </FieldDescription>\n                    </FieldContent>\n                  </Field>\n                </FieldGroup>\n              </FieldSet>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button form=\"contributions-activity\">Save Changes</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\nconst users = [\n  \"shadcn\",\n  \"maxleiter\",\n  \"evilrabbit\",\n  \"pranathip\",\n  \"jorgezreik\",\n  \"shuding\",\n  \"rauchg\",\n]\nfunction AssignIssue() {\n  const anchor = useComboboxAnchor()\n  return (\n    <Example title=\"User Select\" className=\"items-center justify-center\">\n      <Card className=\"w-full max-w-sm\" size=\"sm\">\n        <CardHeader className=\"border-b\">\n          <CardTitle className=\"text-sm\">Assign Issue</CardTitle>\n          <CardDescription className=\"text-sm\">\n            Select users to assign to this issue.\n          </CardDescription>\n          <CardAction>\n            <Tooltip>\n              <TooltipTrigger\n                render={<Button variant=\"outline\" size=\"icon-xs\" />}\n              >\n                <IconPlaceholder\n                  lucide=\"PlusIcon\"\n                  tabler=\"IconPlus\"\n                  hugeicons=\"PlusSignIcon\"\n                  phosphor=\"PlusIcon\"\n                  remixicon=\"RiAddLine\"\n                />\n              </TooltipTrigger>\n              <TooltipContent>Add user</TooltipContent>\n            </Tooltip>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <Combobox\n            multiple\n            autoHighlight\n            items={users}\n            defaultValue={[users[0]]}\n          >\n            <ComboboxChips ref={anchor}>\n              <ComboboxValue>\n                {(values) => (\n                  <React.Fragment>\n                    {values.map((username: string) => (\n                      <ComboboxChip key={username}>\n                        <Avatar className=\"size-4\">\n                          <AvatarImage\n                            src={`https://github.com/${username}.png`}\n                            alt={username}\n                          />\n                          <AvatarFallback>{username.charAt(0)}</AvatarFallback>\n                        </Avatar>\n                        {username}\n                      </ComboboxChip>\n                    ))}\n                    <ComboboxChipsInput\n                      placeholder={\n                        values.length > 0 ? undefined : \"Select a item...\"\n                      }\n                    />\n                  </React.Fragment>\n                )}\n              </ComboboxValue>\n            </ComboboxChips>\n            <ComboboxContent anchor={anchor}>\n              <ComboboxEmpty>No users found.</ComboboxEmpty>\n              <ComboboxList>\n                {(username) => (\n                  <ComboboxItem key={username} value={username}>\n                    <Avatar className=\"size-5\">\n                      <AvatarImage\n                        src={`https://github.com/${username}.png`}\n                        alt={username}\n                      />\n                      <AvatarFallback>{username.charAt(0)}</AvatarFallback>\n                    </Avatar>\n                    {username}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-nova/components/example\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/base-nova/ui/avatar\"\nimport { Badge } from \"@/registry/base-nova/ui/badge\"\nimport { Button } from \"@/registry/base-nova/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-nova/ui/card\"\nimport { Checkbox } from \"@/registry/base-nova/ui/checkbox\"\nimport {\n  Combobox,\n  ComboboxChip,\n  ComboboxChips,\n  ComboboxChipsInput,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxItem,\n  ComboboxList,\n  ComboboxValue,\n  useComboboxAnchor,\n} from \"@/registry/base-nova/ui/combobox\"\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"@/registry/base-nova/ui/command\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/base-nova/ui/drawer\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-nova/ui/dropdown-menu\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/base-nova/ui/empty\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n} from \"@/registry/base-nova/ui/field\"\nimport { Input } from \"@/registry/base-nova/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupTextarea,\n} from \"@/registry/base-nova/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemGroup,\n  ItemMedia,\n  ItemSeparator,\n  ItemTitle,\n} from \"@/registry/base-nova/ui/item\"\nimport { Kbd } from \"@/registry/base-nova/ui/kbd\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/base-nova/ui/native-select\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/base-nova/ui/popover\"\nimport { Separator } from \"@/registry/base-nova/ui/separator\"\nimport { Spinner } from \"@/registry/base-nova/ui/spinner\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/base-nova/ui/tabs\"\nimport { Textarea } from \"@/registry/base-nova/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/base-nova/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function GithubBlock() {\n  return (\n    <ExampleWrapper>\n      <CodespacesCard />\n      <AssignIssue />\n      <Navbar />\n      <RepositoryToolbar />\n      <Profile />\n      <ContributionsActivity />\n      <Contributors />\n    </ExampleWrapper>\n  )\n}\nfunction CodespacesCard() {\n  const [isCreatingCodespace, setIsCreatingCodespace] = React.useState(false)\n  return (\n    <Example title=\"Codespaces\" className=\"min-h-[550px] lg:p-12\">\n      <Card className=\"mx-auto w-full max-w-sm\" size=\"sm\">\n        <CardContent>\n          <Tabs defaultValue=\"codespaces\">\n            <TabsList className=\"w-full\">\n              <TabsTrigger value=\"codespaces\">Codespaces</TabsTrigger>\n              <TabsTrigger value=\"local\">Local</TabsTrigger>\n            </TabsList>\n            <TabsContent value=\"codespaces\">\n              <Item size=\"sm\" className=\"px-1 pt-2\">\n                <ItemContent>\n                  <ItemTitle>Codespaces</ItemTitle>\n                  <ItemDescription>\n                    Your workspaces in the cloud\n                  </ItemDescription>\n                </ItemContent>\n                <ItemActions>\n                  <Tooltip>\n                    <TooltipTrigger\n                      render={<Button variant=\"ghost\" size=\"icon-sm\" />}\n                    >\n                      <IconPlaceholder\n                        lucide=\"PlusIcon\"\n                        tabler=\"IconPlus\"\n                        hugeicons=\"PlusSignIcon\"\n                        phosphor=\"PlusIcon\"\n                        remixicon=\"RiAddLine\"\n                      />\n                    </TooltipTrigger>\n                    <TooltipContent side=\"bottom\">\n                      Create a codespace on main\n                    </TooltipContent>\n                  </Tooltip>\n                  <DropdownMenu>\n                    <Tooltip>\n                      <TooltipTrigger\n                        render={\n                          <DropdownMenuTrigger\n                            render={<Button variant=\"ghost\" size=\"icon-sm\" />}\n                          />\n                        }\n                      >\n                        <IconPlaceholder\n                          lucide=\"MoreHorizontalIcon\"\n                          tabler=\"IconDots\"\n                          hugeicons=\"MoreHorizontalCircle01Icon\"\n                          phosphor=\"DotsThreeOutlineIcon\"\n                          remixicon=\"RiMoreLine\"\n                        />\n                      </TooltipTrigger>\n                      <TooltipContent side=\"bottom\">\n                        Codespace repository configuration\n                      </TooltipContent>\n                    </Tooltip>\n                    <DropdownMenuContent align=\"end\" className=\"w-56\">\n                      <DropdownMenuGroup>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"PlusIcon\"\n                            tabler=\"IconPlus\"\n                            hugeicons=\"PlusSignIcon\"\n                            phosphor=\"PlusIcon\"\n                            remixicon=\"RiAddLine\"\n                          />\n                          New with options...\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"ContainerIcon\"\n                            tabler=\"IconBox\"\n                            hugeicons=\"CubeIcon\"\n                            phosphor=\"CubeIcon\"\n                            remixicon=\"RiBox1Line\"\n                          />\n                          Configure dev container\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"ZapIcon\"\n                            tabler=\"IconBolt\"\n                            hugeicons=\"ZapIcon\"\n                            phosphor=\"LightningIcon\"\n                            remixicon=\"RiFlashlightLine\"\n                          />\n                          Set up prebuilds\n                        </DropdownMenuItem>\n                      </DropdownMenuGroup>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuGroup>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"ServerIcon\"\n                            tabler=\"IconServer\"\n                            hugeicons=\"ServerStackIcon\"\n                            phosphor=\"HardDrivesIcon\"\n                            remixicon=\"RiHardDriveLine\"\n                          />\n                          Manage codespaces\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"ShareIcon\"\n                            tabler=\"IconShare2\"\n                            hugeicons=\"Share03Icon\"\n                            phosphor=\"ShareIcon\"\n                            remixicon=\"RiShareLine\"\n                          />\n                          Share deep link\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"InfoIcon\"\n                            tabler=\"IconInfoCircle\"\n                            hugeicons=\"AlertCircleIcon\"\n                            phosphor=\"InfoIcon\"\n                            remixicon=\"RiInformationLine\"\n                          />\n                          What are codespaces?\n                        </DropdownMenuItem>\n                      </DropdownMenuGroup>\n                    </DropdownMenuContent>\n                  </DropdownMenu>\n                </ItemActions>\n              </Item>\n              <Separator className=\"-mx-2 my-2 w-auto!\" />\n              <Empty className=\"p-4\">\n                <EmptyHeader>\n                  <EmptyMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"ServerIcon\"\n                      tabler=\"IconServer\"\n                      hugeicons=\"ServerStackIcon\"\n                      phosphor=\"HardDrivesIcon\"\n                      remixicon=\"RiHardDriveLine\"\n                    />\n                  </EmptyMedia>\n                  <EmptyTitle>No codespaces</EmptyTitle>\n                  <EmptyDescription>\n                    You don&apos;t have any codespaces with this repository\n                    checked out\n                  </EmptyDescription>\n                </EmptyHeader>\n                <EmptyContent>\n                  <Button\n                    size=\"sm\"\n                    onClick={() => {\n                      setIsCreatingCodespace(true)\n                      setTimeout(() => {\n                        setIsCreatingCodespace(false)\n                      }, 2000)\n                    }}\n                    disabled={isCreatingCodespace}\n                  >\n                    {isCreatingCodespace ? (\n                      <Spinner data-icon=\"inline-start\" />\n                    ) : (\n                      \"\"\n                    )}\n                    Create Codespace\n                  </Button>\n                  <a\n                    href=\"#learn-more\"\n                    className=\"text-muted-foreground text-xs underline underline-offset-4\"\n                  >\n                    Learn more about codespaces\n                  </a>\n                </EmptyContent>\n              </Empty>\n              <Separator className=\"-mx-2 my-2 w-auto!\" />\n              <div className=\"text-muted-foreground p-1.5 text-xs\">\n                Codespace usage for this repository is paid for by{\" \"}\n                <span className=\"font-medium\">shadcn</span>.\n              </div>\n            </TabsContent>\n            <TabsContent value=\"local\">\n              <Item size=\"sm\" className=\"hidden p-0\">\n                <ItemContent>\n                  <ItemTitle className=\"gap-2\">\n                    <IconPlaceholder\n                      lucide=\"TerminalIcon\"\n                      tabler=\"IconTerminal\"\n                      hugeicons=\"ComputerTerminal01Icon\"\n                      phosphor=\"TerminalIcon\"\n                      remixicon=\"RiTerminalBoxLine\"\n                      className=\"size-4\"\n                    />\n                    Clone\n                  </ItemTitle>\n                </ItemContent>\n                <ItemActions>\n                  <Tooltip>\n                    <TooltipTrigger\n                      render={<Button variant=\"ghost\" size=\"icon\" />}\n                    >\n                      <IconPlaceholder\n                        lucide=\"InfoIcon\"\n                        tabler=\"IconInfoCircle\"\n                        hugeicons=\"AlertCircleIcon\"\n                        phosphor=\"InfoIcon\"\n                        remixicon=\"RiInformationLine\"\n                      />\n                    </TooltipTrigger>\n                    <TooltipContent side=\"left\">\n                      Which remote URL should I use?\n                    </TooltipContent>\n                  </Tooltip>\n                </ItemActions>\n              </Item>\n              <Tabs defaultValue=\"https\">\n                <TabsList\n                  variant=\"line\"\n                  className=\"w-full justify-start border-b *:[button]:flex-0\"\n                >\n                  <TabsTrigger value=\"https\">HTTPS</TabsTrigger>\n                  <TabsTrigger value=\"ssh\">SSH</TabsTrigger>\n                  <TabsTrigger value=\"cli\">GitHub CLI</TabsTrigger>\n                </TabsList>\n                <div className=\"bg-muted/30 rounded-md border p-2\">\n                  <TabsContent value=\"https\">\n                    <Field className=\"gap-2\">\n                      <FieldLabel htmlFor=\"https-url\" className=\"sr-only\">\n                        HTTPS URL\n                      </FieldLabel>\n                      <InputGroup>\n                        <InputGroupAddon align=\"inline-end\">\n                          <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                              phosphor=\"CopyIcon\"\n                              remixicon=\"RiFileCopyLine\"\n                            />\n                          </InputGroupButton>\n                        </InputGroupAddon>\n                        <InputGroupInput\n                          id=\"https-url\"\n                          defaultValue=\"https://github.com/shadcn-ui/ui.git\"\n                          readOnly\n                        />\n                      </InputGroup>\n                      <FieldDescription>\n                        Clone using the web URL.\n                      </FieldDescription>\n                    </Field>\n                  </TabsContent>\n                  <TabsContent value=\"ssh\">\n                    <Field className=\"gap-2\">\n                      <FieldLabel htmlFor=\"ssh-url\" className=\"sr-only\">\n                        SSH URL\n                      </FieldLabel>\n                      <InputGroup>\n                        <InputGroupAddon align=\"inline-end\">\n                          <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                              phosphor=\"CopyIcon\"\n                              remixicon=\"RiFileCopyLine\"\n                            />\n                          </InputGroupButton>\n                        </InputGroupAddon>\n                        <InputGroupInput\n                          id=\"ssh-url\"\n                          defaultValue=\"git@github.com:shadcn-ui/ui.git\"\n                          readOnly\n                        />\n                      </InputGroup>\n                      <FieldDescription>\n                        Use a password-protected SSH key.\n                      </FieldDescription>\n                    </Field>\n                  </TabsContent>\n                  <TabsContent value=\"cli\">\n                    <Field className=\"gap-2\">\n                      <FieldLabel htmlFor=\"cli-command\" className=\"sr-only\">\n                        CLI Command\n                      </FieldLabel>\n                      <InputGroup>\n                        <InputGroupAddon align=\"inline-end\">\n                          <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                              phosphor=\"CopyIcon\"\n                              remixicon=\"RiFileCopyLine\"\n                            />\n                          </InputGroupButton>\n                        </InputGroupAddon>\n                        <InputGroupInput\n                          id=\"cli-command\"\n                          defaultValue=\"gh repo clone shadcn-ui/ui\"\n                          readOnly\n                        />\n                      </InputGroup>\n                      <FieldDescription>\n                        Work fast with our official CLI.{\" \"}\n                        <a href=\"#learn-more\">Learn more</a>\n                      </FieldDescription>\n                    </Field>\n                  </TabsContent>\n                </div>\n              </Tabs>\n              <Separator className=\"-mx-2 my-2 w-auto!\" />\n              <div className=\"flex flex-col\">\n                <Button\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  className=\"justify-start gap-1.5\"\n                >\n                  <IconPlaceholder\n                    lucide=\"MonitorIcon\"\n                    tabler=\"IconDeviceDesktop\"\n                    hugeicons=\"ComputerIcon\"\n                    phosphor=\"MonitorIcon\"\n                    remixicon=\"RiComputerLine\"\n                    data-icon=\"inline-start\"\n                  />\n                  Open with GitHub Desktop\n                </Button>\n                <Button\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  className=\"justify-start gap-1.5\"\n                >\n                  <IconPlaceholder\n                    lucide=\"DownloadIcon\"\n                    tabler=\"IconDownload\"\n                    hugeicons=\"DownloadIcon\"\n                    phosphor=\"DownloadIcon\"\n                    remixicon=\"RiDownloadLine\"\n                    data-icon=\"inline-start\"\n                  />\n                  Download ZIP\n                </Button>\n              </div>\n            </TabsContent>\n          </Tabs>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\nfunction RepositoryToolbar() {\n  const [selectedBranch, setSelectedBranch] = React.useState(\"main\")\n  return (\n    <Example title=\"Repository Toolbar\">\n      <div className=\"flex items-center gap-2\">\n        <InputGroup>\n          <InputGroupInput placeholder=\"Go to file\" />\n          <InputGroupAddon align=\"inline-start\">\n            <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n              <IconPlaceholder\n                lucide=\"SearchIcon\"\n                tabler=\"IconSearch\"\n                hugeicons=\"SearchIcon\"\n                phosphor=\"MagnifyingGlassIcon\"\n                remixicon=\"RiSearchLine\"\n              />\n            </InputGroupButton>\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">\n            <Kbd>t</Kbd>\n          </InputGroupAddon>\n        </InputGroup>\n        <DropdownMenu>\n          <DropdownMenuTrigger render={<Button variant=\"outline\" />}>\n            Add File\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDown01Icon\"\n              phosphor=\"CaretDownIcon\"\n              remixicon=\"RiArrowDownSLine\"\n              data-icon=\"inline-end\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"PlusIcon\"\n                  tabler=\"IconPlus\"\n                  hugeicons=\"PlusSignIcon\"\n                  phosphor=\"PlusIcon\"\n                  remixicon=\"RiAddLine\"\n                />\n                Create new file\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"UploadIcon\"\n                  hugeicons=\"Upload01Icon\"\n                  tabler=\"IconUpload\"\n                  phosphor=\"UploadIcon\"\n                  remixicon=\"RiUploadLine\"\n                />\n                Upload files\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <Popover>\n          <Tooltip>\n            <TooltipTrigger\n              render={\n                <PopoverTrigger\n                  render={<Button variant=\"outline\" size=\"icon\" />}\n                />\n              }\n            >\n              <IconPlaceholder\n                lucide=\"CloudCogIcon\"\n                hugeicons=\"AiCloud01Icon\"\n                tabler=\"IconCloudCog\"\n                phosphor=\"CloudArrowUpIcon\"\n                remixicon=\"RiUploadCloudLine\"\n              />\n            </TooltipTrigger>\n            <TooltipContent>New Agent Task</TooltipContent>\n          </Tooltip>\n          <PopoverContent side=\"bottom\" align=\"end\" className=\"w-96\">\n            <Field>\n              <FieldLabel htmlFor=\"new-agent-task\">New Agent Task</FieldLabel>\n              <InputGroup>\n                <InputGroupTextarea placeholder=\"Describe your task in natural language.\"></InputGroupTextarea>\n                <InputGroupAddon align=\"block-end\">\n                  <Popover>\n                    <Tooltip>\n                      <PopoverTrigger\n                        render={\n                          <TooltipTrigger\n                            render={\n                              <InputGroupButton\n                                variant=\"outline\"\n                                size=\"icon-sm\"\n                              />\n                            }\n                          />\n                        }\n                      >\n                        <IconPlaceholder\n                          lucide=\"GitBranchIcon\"\n                          hugeicons=\"GitBranchIcon\"\n                          tabler=\"IconGitBranch\"\n                          phosphor=\"GitBranchIcon\"\n                          remixicon=\"RiGitBranchLine\"\n                        />\n                      </PopoverTrigger>\n                      <TooltipContent>Select a branch</TooltipContent>\n                    </Tooltip>\n                    <PopoverContent side=\"bottom\" align=\"start\" className=\"p-1\">\n                      <Field>\n                        <FieldLabel htmlFor=\"select-branch\" className=\"sr-only\">\n                          Select a Branch\n                        </FieldLabel>\n                        <Command>\n                          <CommandInput\n                            id=\"select-branch\"\n                            placeholder=\"Find a branch\"\n                          />\n                          <CommandEmpty>No branches found</CommandEmpty>\n                          <CommandList>\n                            <CommandGroup>\n                              {[\n                                \"main\",\n                                \"develop\",\n                                \"feature/123\",\n                                \"feature/user-authentication\",\n                                \"feature/dashboard-redesign\",\n                                \"bugfix/login-error\",\n                                \"hotfix/security-patch\",\n                                \"release/v2.0.0\",\n                                \"feature/api-integration\",\n                                \"bugfix/memory-leak\",\n                                \"feature/dark-mode\",\n                                \"feature/responsive-design\",\n                                \"bugfix/typo-fix\",\n                                \"feature/search-functionality\",\n                                \"release/v1.9.0\",\n                                \"feature/notifications\",\n                                \"bugfix/cache-issue\",\n                                \"feature/payment-gateway\",\n                                \"hotfix/critical-bug\",\n                                \"feature/admin-panel\",\n                                \"bugfix/validation-error\",\n                                \"feature/analytics\",\n                                \"release/v2.1.0\",\n                              ].map((branch) => (\n                                <CommandItem\n                                  key={branch}\n                                  value={branch}\n                                  onSelect={() => setSelectedBranch(branch)}\n                                  data-checked={selectedBranch === branch}\n                                >\n                                  {branch}\n                                </CommandItem>\n                              ))}\n                            </CommandGroup>\n                          </CommandList>\n                        </Command>\n                      </Field>\n                    </PopoverContent>\n                  </Popover>\n                  <Popover>\n                    <Tooltip>\n                      <PopoverTrigger\n                        render={\n                          <TooltipTrigger\n                            render={\n                              <InputGroupButton\n                                variant=\"outline\"\n                                size=\"icon-sm\"\n                              />\n                            }\n                          />\n                        }\n                      >\n                        <IconPlaceholder\n                          lucide=\"BotIcon\"\n                          hugeicons=\"RoboticIcon\"\n                          tabler=\"IconRobot\"\n                          phosphor=\"RobotIcon\"\n                          remixicon=\"RiRobotLine\"\n                        />\n                      </PopoverTrigger>\n                      <TooltipContent>Select Agent</TooltipContent>\n                    </Tooltip>\n                    <PopoverContent side=\"bottom\" align=\"start\">\n                      <Empty className=\"gap-4 p-0\">\n                        <EmptyHeader>\n                          <EmptyTitle className=\"text-sm\">\n                            This repository has no custom agents\n                          </EmptyTitle>\n                          <EmptyDescription className=\"text-xs\">\n                            Custom agents are reusable instructions and tools in\n                            your repository.\n                          </EmptyDescription>\n                        </EmptyHeader>\n                        <EmptyContent>\n                          <Button variant=\"outline\" size=\"sm\">\n                            Create Custom Agent\n                          </Button>\n                        </EmptyContent>\n                      </Empty>\n                    </PopoverContent>\n                  </Popover>\n                  <Tooltip>\n                    <TooltipTrigger\n                      render={\n                        <InputGroupButton\n                          variant=\"ghost\"\n                          size=\"icon-sm\"\n                          className=\"ml-auto\"\n                        />\n                      }\n                    >\n                      <IconPlaceholder\n                        lucide=\"SendIcon\"\n                        hugeicons=\"SentIcon\"\n                        tabler=\"IconSend\"\n                        phosphor=\"PaperPlaneTiltIcon\"\n                        remixicon=\"RiSendPlaneLine\"\n                      />\n                    </TooltipTrigger>\n                    <TooltipContent className=\"flex items-center gap-2 pr-2\">\n                      Start Task <Kbd>⏎</Kbd>\n                    </TooltipContent>\n                  </Tooltip>\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n          </PopoverContent>\n        </Popover>\n      </div>\n    </Example>\n  )\n}\nfunction Navbar() {\n  return (\n    <Example title=\"Account Menu\">\n      <header className=\"flex h-14 w-full items-center gap-2\">\n        <Drawer direction=\"left\">\n          <DrawerTrigger asChild>\n            <Button variant=\"outline\" size=\"icon\">\n              <IconPlaceholder\n                lucide=\"MenuIcon\"\n                hugeicons=\"Menu09Icon\"\n                tabler=\"IconMenu\"\n                phosphor=\"ListIcon\"\n                remixicon=\"RiListUnordered\"\n              />\n              <span className=\"sr-only\">Open menu</span>\n            </Button>\n          </DrawerTrigger>\n          <DrawerContent className=\"max-w-72\">\n            <DrawerHeader className=\"flex flex-row items-center justify-between px-5 pb-0\">\n              <DrawerTitle>Menu</DrawerTitle>\n              <DrawerClose asChild>\n                <Button variant=\"ghost\" size=\"icon-sm\">\n                  <IconPlaceholder\n                    lucide=\"XIcon\"\n                    tabler=\"IconX\"\n                    hugeicons=\"Cancel01Icon\"\n                    phosphor=\"XIcon\"\n                    remixicon=\"RiCloseLine\"\n                  />\n                  <span className=\"sr-only\">Close</span>\n                </Button>\n              </DrawerClose>\n            </DrawerHeader>\n            <div className=\"p-2\">\n              <ItemGroup className=\"gap-px\">\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"HomeIcon\"\n                      tabler=\"IconHome\"\n                      hugeicons=\"HomeIcon\"\n                      phosphor=\"HouseIcon\"\n                      remixicon=\"RiHomeLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Home</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"CircleIcon\"\n                      tabler=\"IconCircle\"\n                      hugeicons=\"CircleIcon\"\n                      phosphor=\"CircleIcon\"\n                      remixicon=\"RiCircleLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Issues</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"GitBranchIcon\"\n                      tabler=\"IconGitBranch\"\n                      hugeicons=\"GitBranchIcon\"\n                      phosphor=\"GitBranchIcon\"\n                      remixicon=\"RiGitBranchLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Pull requests</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"LayoutGridIcon\"\n                      tabler=\"IconLayoutGrid\"\n                      hugeicons=\"GridIcon\"\n                      phosphor=\"GridFourIcon\"\n                      remixicon=\"RiGridLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Projects</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"MailIcon\"\n                      tabler=\"IconMail\"\n                      hugeicons=\"MailIcon\"\n                      phosphor=\"EnvelopeIcon\"\n                      remixicon=\"RiMailLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Discussions</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"ServerIcon\"\n                      tabler=\"IconServer\"\n                      hugeicons=\"ServerStackIcon\"\n                      phosphor=\"HardDrivesIcon\"\n                      remixicon=\"RiHardDriveLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Codespaces</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"BotIcon\"\n                      tabler=\"IconRobot\"\n                      hugeicons=\"RoboticIcon\"\n                      phosphor=\"RobotIcon\"\n                      remixicon=\"RiRobotLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Copilot</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"SparklesIcon\"\n                      tabler=\"IconSparkles\"\n                      hugeicons=\"SparklesIcon\"\n                      phosphor=\"SparkleIcon\"\n                      remixicon=\"RiSparklingLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Spark</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <ItemSeparator />\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"SearchIcon\"\n                      tabler=\"IconSearch\"\n                      hugeicons=\"SearchIcon\"\n                      phosphor=\"MagnifyingGlassIcon\"\n                      remixicon=\"RiSearchLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Explore</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"ShoppingBagIcon\"\n                      tabler=\"IconShoppingBag\"\n                      hugeicons=\"ShoppingBasket01Icon\"\n                      phosphor=\"BagIcon\"\n                      remixicon=\"RiShoppingBagLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Marketplace</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"LinkIcon\"\n                      tabler=\"IconLink\"\n                      hugeicons=\"LinkIcon\"\n                      phosphor=\"LinkIcon\"\n                      remixicon=\"RiLinksLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>MCP registry</ItemTitle>\n                  </ItemContent>\n                </Item>\n              </ItemGroup>\n            </div>\n          </DrawerContent>\n        </Drawer>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <Button\n                variant=\"ghost\"\n                size=\"icon\"\n                className=\"ml-auto rounded-full\"\n              />\n            }\n          >\n            <Avatar>\n              <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"shadcn\" />\n              <AvatarFallback>SC</AvatarFallback>\n            </Avatar>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-56\" align=\"end\">\n            <DropdownMenuGroup>\n              <DropdownMenuLabel className=\"p-0 font-normal\">\n                <Item className=\"px-2 py-1 pb-0.5\" size=\"sm\">\n                  <ItemMedia>\n                    <Avatar>\n                      <AvatarImage\n                        src=\"https://github.com/shadcn.png\"\n                        alt=\"shadcn\"\n                      />\n                      <AvatarFallback>SC</AvatarFallback>\n                    </Avatar>\n                  </ItemMedia>\n                  <ItemContent className=\"gap-0\">\n                    <ItemTitle className=\"text-foreground text-sm\">\n                      shadcn\n                    </ItemTitle>\n                    <ItemDescription className=\"text-xs\">\n                      shadcn@example.com\n                    </ItemDescription>\n                  </ItemContent>\n                </Item>\n              </DropdownMenuLabel>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SmileIcon\"\n                  tabler=\"IconMoodSmile\"\n                  hugeicons=\"SmileIcon\"\n                  phosphor=\"SmileyIcon\"\n                  remixicon=\"RiEmotionLine\"\n                />\n                Set status\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CircleAlertIcon\"\n                  tabler=\"IconExclamationCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                  phosphor=\"WarningCircleIcon\"\n                  remixicon=\"RiErrorWarningLine\"\n                />\n                Single sign-on\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"UserIcon\"\n                  tabler=\"IconUser\"\n                  hugeicons=\"UserIcon\"\n                  phosphor=\"UserIcon\"\n                  remixicon=\"RiUserLine\"\n                />\n                Profile\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"FolderIcon\"\n                  tabler=\"IconFolder\"\n                  hugeicons=\"FolderIcon\"\n                  phosphor=\"FolderIcon\"\n                  remixicon=\"RiFolderLine\"\n                />\n                Repositories\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"StarIcon\"\n                  tabler=\"IconStar\"\n                  hugeicons=\"StarIcon\"\n                  phosphor=\"StarIcon\"\n                  remixicon=\"RiStarLine\"\n                />\n                Stars\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CodeIcon\"\n                  tabler=\"IconCode\"\n                  hugeicons=\"CodeIcon\"\n                  phosphor=\"CodeIcon\"\n                  remixicon=\"RiCodeLine\"\n                />\n                Gists\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"FolderIcon\"\n                  tabler=\"IconFolder\"\n                  hugeicons=\"FolderIcon\"\n                  phosphor=\"FolderIcon\"\n                  remixicon=\"RiFolderLine\"\n                />\n                Organizations\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"ServerIcon\"\n                  tabler=\"IconServer\"\n                  hugeicons=\"ServerStackIcon\"\n                  phosphor=\"HardDrivesIcon\"\n                  remixicon=\"RiHardDriveLine\"\n                />\n                Enterprises\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"HeartIcon\"\n                  tabler=\"IconHeart\"\n                  hugeicons=\"FavouriteIcon\"\n                  phosphor=\"HeartIcon\"\n                  remixicon=\"RiHeartLine\"\n                />\n                Sponsors\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SettingsIcon\"\n                  tabler=\"IconSettings\"\n                  hugeicons=\"SettingsIcon\"\n                  phosphor=\"GearIcon\"\n                  remixicon=\"RiSettingsLine\"\n                />\n                Settings\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"BotIcon\"\n                  tabler=\"IconRobot\"\n                  hugeicons=\"RoboticIcon\"\n                  phosphor=\"RobotIcon\"\n                  remixicon=\"RiRobotLine\"\n                />\n                Copilot settings\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SparklesIcon\"\n                  tabler=\"IconSparkles\"\n                  hugeicons=\"SparklesIcon\"\n                  phosphor=\"SparkleIcon\"\n                  remixicon=\"RiSparklingLine\"\n                />\n                Feature preview\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"MonitorIcon\"\n                  tabler=\"IconDeviceDesktop\"\n                  hugeicons=\"ComputerIcon\"\n                  phosphor=\"MonitorIcon\"\n                  remixicon=\"RiComputerLine\"\n                />\n                Appearance\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"UserIcon\"\n                  tabler=\"IconUser\"\n                  hugeicons=\"UserIcon\"\n                  phosphor=\"UserIcon\"\n                  remixicon=\"RiUserLine\"\n                />\n                Accessibility\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUpIcon\"\n                  phosphor=\"ArrowUpIcon\"\n                  remixicon=\"RiArrowUpLine\"\n                />\n                Upgrade\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"LogOutIcon\"\n                  tabler=\"IconLogout\"\n                  hugeicons=\"LogoutIcon\"\n                  phosphor=\"SignOutIcon\"\n                  remixicon=\"RiLogoutBoxLine\"\n                />\n                Sign out\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </header>\n    </Example>\n  )\n}\nconst usernames = [\n  \"shadcn\",\n  \"vercel\",\n  \"nextjs\",\n  \"tailwindlabs\",\n  \"typescript-lang\",\n  \"eslint\",\n  \"prettier\",\n  \"babel\",\n  \"webpack\",\n  \"rollup\",\n  \"parcel\",\n  \"vite\",\n  \"react\",\n  \"vue\",\n  \"angular\",\n  \"solid\",\n]\nfunction Contributors() {\n  return (\n    <Example title=\"Contributors\" className=\"items-center lg:p-16\">\n      <Card className=\"max-w-sm\">\n        <CardHeader>\n          <CardTitle>\n            Contributors <Badge variant=\"secondary\">312</Badge>\n          </CardTitle>\n        </CardHeader>\n        <CardContent>\n          <div className=\"flex flex-wrap gap-2\">\n            {usernames.map((username) => (\n              <Avatar key={username}>\n                <AvatarImage\n                  src={`https://github.com/${username}.png`}\n                  alt={username}\n                />\n                <AvatarFallback>{username.charAt(0)}</AvatarFallback>\n              </Avatar>\n            ))}\n          </div>\n        </CardContent>\n        <CardFooter>\n          <a href=\"#\" className=\"text-sm underline underline-offset-4\">\n            + 810 contributors\n          </a>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\nfunction Profile() {\n  return (\n    <Example title=\"Profile\" className=\"items-center justify-center\">\n      <Card className=\"mx-auto w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>Profile</CardTitle>\n          <CardDescription>Manage your profile information.</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form id=\"profile\">\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"name\">Name</FieldLabel>\n                <Input id=\"name\" placeholder=\"shadcn\" />\n                <FieldDescription>\n                  Your name may appear around GitHub where you contribute or are\n                  mentioned. You can remove it at any time.\n                </FieldDescription>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"email\">Public Email</FieldLabel>\n                <NativeSelect id=\"email\">\n                  <NativeSelectOption value=\"m@shadcn.com\">\n                    m@shadcn.com\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"m@gmail.com\">\n                    m@gmail.com\n                  </NativeSelectOption>\n                </NativeSelect>\n                <FieldDescription>\n                  You can manage verified email addresses in your{\" \"}\n                  <a href=\"#email-settings\">email settings</a>.\n                </FieldDescription>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"bio\">Bio</FieldLabel>\n                <Textarea\n                  id=\"bio\"\n                  placeholder=\"Tell us a little bit about yourself\"\n                />\n                <FieldDescription>\n                  You can <span>@mention</span> other users and organizations to\n                  link to them.\n                </FieldDescription>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button form=\"profile\">Save Profile</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\nfunction ContributionsActivity() {\n  return (\n    <Example title=\"Contributions Activity\" className=\"justify-center\">\n      <Card className=\"mx-auto w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>Contributions & Activity</CardTitle>\n          <CardDescription>\n            Manage your contributions and activity visibility.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form id=\"contributions-activity\">\n            <FieldGroup>\n              <FieldSet>\n                <FieldLegend className=\"sr-only\">\n                  Contributions & activity\n                </FieldLegend>\n                <FieldGroup className=\"gap-3\">\n                  <Field orientation=\"horizontal\">\n                    <Checkbox id=\"private-profile\" />\n                    <FieldContent>\n                      <FieldLabel\n                        htmlFor=\"private-profile\"\n                        className=\"font-normal\"\n                      >\n                        Make profile private and hide activity\n                      </FieldLabel>\n                      <FieldDescription>\n                        Enabling this will hide your contributions and activity\n                        from your GitHub profile and from social features like\n                        followers, stars, feeds, leaderboards and releases.\n                      </FieldDescription>\n                    </FieldContent>\n                  </Field>\n                  <Field orientation=\"horizontal\">\n                    <Checkbox id=\"private-contributions\" defaultChecked />\n                    <FieldContent>\n                      <FieldLabel\n                        htmlFor=\"private-contributions\"\n                        className=\"font-normal\"\n                      >\n                        Include private contributions on my profile\n                      </FieldLabel>\n                      <FieldDescription>\n                        Your contribution graph, achievements, and activity\n                        overview will show your private contributions without\n                        revealing any repository or organization information.{\" \"}\n                        <a href=\"#read-more\">Read more</a>.\n                      </FieldDescription>\n                    </FieldContent>\n                  </Field>\n                </FieldGroup>\n              </FieldSet>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button form=\"contributions-activity\">Save Changes</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\nconst users = [\n  \"shadcn\",\n  \"maxleiter\",\n  \"evilrabbit\",\n  \"pranathip\",\n  \"jorgezreik\",\n  \"shuding\",\n  \"rauchg\",\n]\nfunction AssignIssue() {\n  const anchor = useComboboxAnchor()\n  return (\n    <Example title=\"User Select\" className=\"items-center justify-center\">\n      <Card className=\"w-full max-w-sm\" size=\"sm\">\n        <CardHeader className=\"border-b\">\n          <CardTitle className=\"text-sm\">Assign Issue</CardTitle>\n          <CardDescription className=\"text-sm\">\n            Select users to assign to this issue.\n          </CardDescription>\n          <CardAction>\n            <Tooltip>\n              <TooltipTrigger\n                render={<Button variant=\"outline\" size=\"icon-xs\" />}\n              >\n                <IconPlaceholder\n                  lucide=\"PlusIcon\"\n                  tabler=\"IconPlus\"\n                  hugeicons=\"PlusSignIcon\"\n                  phosphor=\"PlusIcon\"\n                  remixicon=\"RiAddLine\"\n                />\n              </TooltipTrigger>\n              <TooltipContent>Add user</TooltipContent>\n            </Tooltip>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <Combobox\n            multiple\n            autoHighlight\n            items={users}\n            defaultValue={[users[0]]}\n          >\n            <ComboboxChips ref={anchor}>\n              <ComboboxValue>\n                {(values) => (\n                  <React.Fragment>\n                    {values.map((username: string) => (\n                      <ComboboxChip key={username}>\n                        <Avatar className=\"size-4\">\n                          <AvatarImage\n                            src={`https://github.com/${username}.png`}\n                            alt={username}\n                          />\n                          <AvatarFallback>{username.charAt(0)}</AvatarFallback>\n                        </Avatar>\n                        {username}\n                      </ComboboxChip>\n                    ))}\n                    <ComboboxChipsInput\n                      placeholder={\n                        values.length > 0 ? undefined : \"Select a item...\"\n                      }\n                    />\n                  </React.Fragment>\n                )}\n              </ComboboxValue>\n            </ComboboxChips>\n            <ComboboxContent anchor={anchor}>\n              <ComboboxEmpty>No users found.</ComboboxEmpty>\n              <ComboboxList>\n                {(username) => (\n                  <ComboboxItem key={username} value={username}>\n                    <Avatar className=\"size-5\">\n                      <AvatarImage\n                        src={`https://github.com/${username}.png`}\n                        alt={username}\n                      />\n                      <AvatarFallback>{username.charAt(0)}</AvatarFallback>\n                    </Avatar>\n                    {username}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/github.json b/apps/v4/public/r/styles/base-vega/github.json
index bc5072e072..99bc833871 100644
--- a/apps/v4/public/r/styles/base-vega/github.json
+++ b/apps/v4/public/r/styles/base-vega/github.json
@@ -30,7 +30,7 @@
   "files": [
     {
       "path": "registry/base-vega/blocks/github.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-vega/components/example\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/base-vega/ui/avatar\"\nimport { Badge } from \"@/registry/base-vega/ui/badge\"\nimport { Button } from \"@/registry/base-vega/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-vega/ui/card\"\nimport { Checkbox } from \"@/registry/base-vega/ui/checkbox\"\nimport {\n  Combobox,\n  ComboboxChip,\n  ComboboxChips,\n  ComboboxChipsInput,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxItem,\n  ComboboxList,\n  ComboboxValue,\n  useComboboxAnchor,\n} from \"@/registry/base-vega/ui/combobox\"\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"@/registry/base-vega/ui/command\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/base-vega/ui/drawer\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-vega/ui/dropdown-menu\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/base-vega/ui/empty\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n} from \"@/registry/base-vega/ui/field\"\nimport { Input } from \"@/registry/base-vega/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupTextarea,\n} from \"@/registry/base-vega/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemGroup,\n  ItemMedia,\n  ItemSeparator,\n  ItemTitle,\n} from \"@/registry/base-vega/ui/item\"\nimport { Kbd } from \"@/registry/base-vega/ui/kbd\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/base-vega/ui/native-select\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/base-vega/ui/popover\"\nimport { Separator } from \"@/registry/base-vega/ui/separator\"\nimport { Spinner } from \"@/registry/base-vega/ui/spinner\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/base-vega/ui/tabs\"\nimport { Textarea } from \"@/registry/base-vega/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/base-vega/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function GithubBlock() {\n  return (\n    <ExampleWrapper>\n      <CodespacesCard />\n      <AssignIssue />\n      <Navbar />\n      <RepositoryToolbar />\n      <Profile />\n      <ContributionsActivity />\n      <Contributors />\n    </ExampleWrapper>\n  )\n}\nfunction CodespacesCard() {\n  const [isCreatingCodespace, setIsCreatingCodespace] = React.useState(false)\n  return (\n    <Example title=\"Codespaces\" className=\"min-h-[550px] lg:p-12\">\n      <Card className=\"mx-auto w-full max-w-sm\" size=\"sm\">\n        <CardContent>\n          <Tabs defaultValue=\"codespaces\">\n            <TabsList className=\"w-full\">\n              <TabsTrigger value=\"codespaces\">Codespaces</TabsTrigger>\n              <TabsTrigger value=\"local\">Local</TabsTrigger>\n            </TabsList>\n            <TabsContent value=\"codespaces\">\n              <Item size=\"sm\" className=\"px-1 pt-2\">\n                <ItemContent>\n                  <ItemTitle>Codespaces</ItemTitle>\n                  <ItemDescription>\n                    Your workspaces in the cloud\n                  </ItemDescription>\n                </ItemContent>\n                <ItemActions>\n                  <Tooltip>\n                    <TooltipTrigger\n                      render={<Button variant=\"ghost\" size=\"icon-sm\" />}\n                    >\n                      <IconPlaceholder\n                        lucide=\"PlusIcon\"\n                        tabler=\"IconPlus\"\n                        hugeicons=\"PlusSignIcon\"\n                        phosphor=\"PlusIcon\"\n                        remixicon=\"RiAddLine\"\n                      />\n                    </TooltipTrigger>\n                    <TooltipContent side=\"bottom\">\n                      Create a codespace on main\n                    </TooltipContent>\n                  </Tooltip>\n                  <DropdownMenu>\n                    <Tooltip>\n                      <TooltipTrigger\n                        render={\n                          <DropdownMenuTrigger\n                            render={<Button variant=\"ghost\" size=\"icon-sm\" />}\n                          />\n                        }\n                      >\n                        <IconPlaceholder\n                          lucide=\"MoreHorizontalIcon\"\n                          tabler=\"IconDots\"\n                          hugeicons=\"MoreHorizontalCircle01Icon\"\n                          phosphor=\"DotsThreeOutlineIcon\"\n                          remixicon=\"RiMoreLine\"\n                        />\n                      </TooltipTrigger>\n                      <TooltipContent side=\"bottom\">\n                        Codespace repository configuration\n                      </TooltipContent>\n                    </Tooltip>\n                    <DropdownMenuContent align=\"end\" className=\"w-56\">\n                      <DropdownMenuGroup>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"PlusIcon\"\n                            tabler=\"IconPlus\"\n                            hugeicons=\"PlusSignIcon\"\n                            phosphor=\"PlusIcon\"\n                            remixicon=\"RiAddLine\"\n                          />\n                          New with options...\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"ContainerIcon\"\n                            tabler=\"IconBox\"\n                            hugeicons=\"CubeIcon\"\n                            phosphor=\"CubeIcon\"\n                            remixicon=\"RiBox1Line\"\n                          />\n                          Configure dev container\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"ZapIcon\"\n                            tabler=\"IconBolt\"\n                            hugeicons=\"ZapIcon\"\n                            phosphor=\"LightningIcon\"\n                            remixicon=\"RiFlashlightLine\"\n                          />\n                          Set up prebuilds\n                        </DropdownMenuItem>\n                      </DropdownMenuGroup>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuGroup>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"ServerIcon\"\n                            tabler=\"IconServer\"\n                            hugeicons=\"ServerStackIcon\"\n                            phosphor=\"HardDrivesIcon\"\n                            remixicon=\"RiHardDriveLine\"\n                          />\n                          Manage codespaces\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"ShareIcon\"\n                            tabler=\"IconShare2\"\n                            hugeicons=\"Share03Icon\"\n                            phosphor=\"ShareIcon\"\n                            remixicon=\"RiShareLine\"\n                          />\n                          Share deep link\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"InfoIcon\"\n                            tabler=\"IconInfoCircle\"\n                            hugeicons=\"AlertCircleIcon\"\n                            phosphor=\"InfoIcon\"\n                            remixicon=\"RiInformationLine\"\n                          />\n                          What are codespaces?\n                        </DropdownMenuItem>\n                      </DropdownMenuGroup>\n                    </DropdownMenuContent>\n                  </DropdownMenu>\n                </ItemActions>\n              </Item>\n              <Separator className=\"-mx-2 my-2 w-auto!\" />\n              <Empty className=\"p-4\">\n                <EmptyHeader>\n                  <EmptyMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"ServerIcon\"\n                      tabler=\"IconServer\"\n                      hugeicons=\"ServerStackIcon\"\n                      phosphor=\"HardDrivesIcon\"\n                      remixicon=\"RiHardDriveLine\"\n                    />\n                  </EmptyMedia>\n                  <EmptyTitle>No codespaces</EmptyTitle>\n                  <EmptyDescription>\n                    You don&apos;t have any codespaces with this repository\n                    checked out\n                  </EmptyDescription>\n                </EmptyHeader>\n                <EmptyContent>\n                  <Button\n                    size=\"sm\"\n                    onClick={() => {\n                      setIsCreatingCodespace(true)\n                      setTimeout(() => {\n                        setIsCreatingCodespace(false)\n                      }, 2000)\n                    }}\n                    disabled={isCreatingCodespace}\n                  >\n                    {isCreatingCodespace ? (\n                      <Spinner data-icon=\"inline-start\" />\n                    ) : (\n                      \"\"\n                    )}\n                    Create Codespace\n                  </Button>\n                  <a\n                    href=\"#learn-more\"\n                    className=\"text-muted-foreground text-xs underline underline-offset-4\"\n                  >\n                    Learn more about codespaces\n                  </a>\n                </EmptyContent>\n              </Empty>\n              <Separator className=\"-mx-2 my-2 w-auto!\" />\n              <div className=\"text-muted-foreground p-1.5 text-xs\">\n                Codespace usage for this repository is paid for by{\" \"}\n                <span className=\"font-medium\">shadcn</span>.\n              </div>\n            </TabsContent>\n            <TabsContent value=\"local\">\n              <Item size=\"sm\" className=\"hidden p-0\">\n                <ItemContent>\n                  <ItemTitle className=\"gap-2\">\n                    <IconPlaceholder\n                      lucide=\"TerminalIcon\"\n                      tabler=\"IconTerminal\"\n                      hugeicons=\"ComputerTerminal01Icon\"\n                      phosphor=\"TerminalIcon\"\n                      remixicon=\"RiTerminalBoxLine\"\n                      className=\"size-4\"\n                    />\n                    Clone\n                  </ItemTitle>\n                </ItemContent>\n                <ItemActions>\n                  <Tooltip>\n                    <TooltipTrigger\n                      render={<Button variant=\"ghost\" size=\"icon\" />}\n                    >\n                      <IconPlaceholder\n                        lucide=\"InfoIcon\"\n                        tabler=\"IconInfoCircle\"\n                        hugeicons=\"AlertCircleIcon\"\n                        phosphor=\"InfoIcon\"\n                        remixicon=\"RiInformationLine\"\n                      />\n                    </TooltipTrigger>\n                    <TooltipContent side=\"left\">\n                      Which remote URL should I use?\n                    </TooltipContent>\n                  </Tooltip>\n                </ItemActions>\n              </Item>\n              <Tabs defaultValue=\"https\">\n                <TabsList\n                  variant=\"line\"\n                  className=\"w-full justify-start border-b *:[button]:flex-0\"\n                >\n                  <TabsTrigger value=\"https\">HTTPS</TabsTrigger>\n                  <TabsTrigger value=\"ssh\">SSH</TabsTrigger>\n                  <TabsTrigger value=\"cli\">GitHub CLI</TabsTrigger>\n                </TabsList>\n                <div className=\"bg-muted/30 rounded-md border p-2\">\n                  <TabsContent value=\"https\">\n                    <Field className=\"gap-2\">\n                      <FieldLabel htmlFor=\"https-url\" className=\"sr-only\">\n                        HTTPS URL\n                      </FieldLabel>\n                      <InputGroup>\n                        <InputGroupAddon align=\"inline-end\">\n                          <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                              phosphor=\"CopyIcon\"\n                              remixicon=\"RiFileCopyLine\"\n                            />\n                          </InputGroupButton>\n                        </InputGroupAddon>\n                        <InputGroupInput\n                          id=\"https-url\"\n                          defaultValue=\"https://github.com/shadcn-ui/ui.git\"\n                          readOnly\n                        />\n                      </InputGroup>\n                      <FieldDescription>\n                        Clone using the web URL.\n                      </FieldDescription>\n                    </Field>\n                  </TabsContent>\n                  <TabsContent value=\"ssh\">\n                    <Field className=\"gap-2\">\n                      <FieldLabel htmlFor=\"ssh-url\" className=\"sr-only\">\n                        SSH URL\n                      </FieldLabel>\n                      <InputGroup>\n                        <InputGroupAddon align=\"inline-end\">\n                          <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                              phosphor=\"CopyIcon\"\n                              remixicon=\"RiFileCopyLine\"\n                            />\n                          </InputGroupButton>\n                        </InputGroupAddon>\n                        <InputGroupInput\n                          id=\"ssh-url\"\n                          defaultValue=\"git@github.com:shadcn-ui/ui.git\"\n                          readOnly\n                        />\n                      </InputGroup>\n                      <FieldDescription>\n                        Use a password-protected SSH key.\n                      </FieldDescription>\n                    </Field>\n                  </TabsContent>\n                  <TabsContent value=\"cli\">\n                    <Field className=\"gap-2\">\n                      <FieldLabel htmlFor=\"cli-command\" className=\"sr-only\">\n                        CLI Command\n                      </FieldLabel>\n                      <InputGroup>\n                        <InputGroupAddon align=\"inline-end\">\n                          <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                              phosphor=\"CopyIcon\"\n                              remixicon=\"RiFileCopyLine\"\n                            />\n                          </InputGroupButton>\n                        </InputGroupAddon>\n                        <InputGroupInput\n                          id=\"cli-command\"\n                          defaultValue=\"gh repo clone shadcn-ui/ui\"\n                          readOnly\n                        />\n                      </InputGroup>\n                      <FieldDescription>\n                        Work fast with our official CLI.{\" \"}\n                        <a href=\"#learn-more\">Learn more</a>\n                      </FieldDescription>\n                    </Field>\n                  </TabsContent>\n                </div>\n              </Tabs>\n              <Separator className=\"-mx-2 my-2 w-auto!\" />\n              <div className=\"flex flex-col\">\n                <Button\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  className=\"justify-start gap-1.5\"\n                >\n                  <IconPlaceholder\n                    lucide=\"MonitorIcon\"\n                    tabler=\"IconDeviceDesktop\"\n                    hugeicons=\"ComputerIcon\"\n                    phosphor=\"MonitorIcon\"\n                    remixicon=\"RiComputerLine\"\n                    data-icon=\"inline-start\"\n                  />\n                  Open with GitHub Desktop\n                </Button>\n                <Button\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  className=\"justify-start gap-1.5\"\n                >\n                  <IconPlaceholder\n                    lucide=\"DownloadIcon\"\n                    tabler=\"IconDownload\"\n                    hugeicons=\"DownloadIcon\"\n                    phosphor=\"DownloadIcon\"\n                    remixicon=\"RiDownloadLine\"\n                    data-icon=\"inline-start\"\n                  />\n                  Download ZIP\n                </Button>\n              </div>\n            </TabsContent>\n          </Tabs>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\nfunction RepositoryToolbar() {\n  const [selectedBranch, setSelectedBranch] = React.useState(\"main\")\n  return (\n    <Example title=\"Repository Toolbar\">\n      <div className=\"flex items-center gap-2\">\n        <InputGroup>\n          <InputGroupInput placeholder=\"Go to file\" />\n          <InputGroupAddon align=\"inline-start\">\n            <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n              <IconPlaceholder\n                lucide=\"SearchIcon\"\n                tabler=\"IconSearch\"\n                hugeicons=\"SearchIcon\"\n                phosphor=\"MagnifyingGlassIcon\"\n                remixicon=\"RiSearchLine\"\n              />\n            </InputGroupButton>\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">\n            <Kbd>t</Kbd>\n          </InputGroupAddon>\n        </InputGroup>\n        <DropdownMenu>\n          <DropdownMenuTrigger render={<Button variant=\"outline\" />}>\n            Add File\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDown01Icon\"\n              phosphor=\"CaretDownIcon\"\n              remixicon=\"RiArrowDownSLine\"\n              data-icon=\"inline-end\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"PlusIcon\"\n                  tabler=\"IconPlus\"\n                  hugeicons=\"PlusSignIcon\"\n                  phosphor=\"PlusIcon\"\n                  remixicon=\"RiAddLine\"\n                />\n                Create new file\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"UploadIcon\"\n                  hugeicons=\"Upload01Icon\"\n                  tabler=\"IconUpload\"\n                  phosphor=\"UploadIcon\"\n                  remixicon=\"RiUploadLine\"\n                />\n                Upload files\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <Popover>\n          <Tooltip>\n            <TooltipTrigger\n              render={\n                <PopoverTrigger\n                  render={<Button variant=\"outline\" size=\"icon\" />}\n                />\n              }\n            >\n              <IconPlaceholder\n                lucide=\"CloudCogIcon\"\n                hugeicons=\"AiCloud01Icon\"\n                tabler=\"IconCloudCog\"\n                phosphor=\"CloudArrowUpIcon\"\n                remixicon=\"RiUploadCloudLine\"\n              />\n            </TooltipTrigger>\n            <TooltipContent>New Agent Task</TooltipContent>\n          </Tooltip>\n          <PopoverContent side=\"bottom\" align=\"end\" className=\"w-96\">\n            <Field>\n              <FieldLabel htmlFor=\"new-agent-task\">New Agent Task</FieldLabel>\n              <InputGroup>\n                <InputGroupTextarea placeholder=\"Describe your task in natural language.\"></InputGroupTextarea>\n                <InputGroupAddon align=\"block-end\">\n                  <Popover>\n                    <Tooltip>\n                      <PopoverTrigger\n                        render={\n                          <TooltipTrigger\n                            render={\n                              <InputGroupButton\n                                variant=\"outline\"\n                                size=\"icon-sm\"\n                              />\n                            }\n                          />\n                        }\n                      >\n                        <IconPlaceholder\n                          lucide=\"GitBranchIcon\"\n                          hugeicons=\"GitBranchIcon\"\n                          tabler=\"IconGitBranch\"\n                          phosphor=\"GitBranchIcon\"\n                          remixicon=\"RiGitBranchLine\"\n                        />\n                      </PopoverTrigger>\n                      <TooltipContent>Select a branch</TooltipContent>\n                    </Tooltip>\n                    <PopoverContent side=\"bottom\" align=\"start\" className=\"p-1\">\n                      <Field>\n                        <FieldLabel htmlFor=\"select-branch\" className=\"sr-only\">\n                          Select a Branch\n                        </FieldLabel>\n                        <Command>\n                          <CommandInput\n                            id=\"select-branch\"\n                            placeholder=\"Find a branch\"\n                          />\n                          <CommandEmpty>No branches found</CommandEmpty>\n                          <CommandList>\n                            <CommandGroup>\n                              {[\n                                \"main\",\n                                \"develop\",\n                                \"feature/123\",\n                                \"feature/user-authentication\",\n                                \"feature/dashboard-redesign\",\n                                \"bugfix/login-error\",\n                                \"hotfix/security-patch\",\n                                \"release/v2.0.0\",\n                                \"feature/api-integration\",\n                                \"bugfix/memory-leak\",\n                                \"feature/dark-mode\",\n                                \"feature/responsive-design\",\n                                \"bugfix/typo-fix\",\n                                \"feature/search-functionality\",\n                                \"release/v1.9.0\",\n                                \"feature/notifications\",\n                                \"bugfix/cache-issue\",\n                                \"feature/payment-gateway\",\n                                \"hotfix/critical-bug\",\n                                \"feature/admin-panel\",\n                                \"bugfix/validation-error\",\n                                \"feature/analytics\",\n                                \"release/v2.1.0\",\n                              ].map((branch) => (\n                                <CommandItem\n                                  key={branch}\n                                  value={branch}\n                                  onSelect={() => setSelectedBranch(branch)}\n                                  data-checked={selectedBranch === branch}\n                                >\n                                  {branch}\n                                </CommandItem>\n                              ))}\n                            </CommandGroup>\n                          </CommandList>\n                        </Command>\n                      </Field>\n                    </PopoverContent>\n                  </Popover>\n                  <Popover>\n                    <Tooltip>\n                      <PopoverTrigger\n                        render={\n                          <TooltipTrigger\n                            render={\n                              <InputGroupButton\n                                variant=\"outline\"\n                                size=\"icon-sm\"\n                              />\n                            }\n                          />\n                        }\n                      >\n                        <IconPlaceholder\n                          lucide=\"BotIcon\"\n                          hugeicons=\"RoboticIcon\"\n                          tabler=\"IconRobot\"\n                          phosphor=\"RobotIcon\"\n                          remixicon=\"RiRobotLine\"\n                        />\n                      </PopoverTrigger>\n                      <TooltipContent>Select Agent</TooltipContent>\n                    </Tooltip>\n                    <PopoverContent side=\"bottom\" align=\"start\">\n                      <Empty className=\"gap-4 p-0\">\n                        <EmptyHeader>\n                          <EmptyTitle className=\"text-sm\">\n                            This repository has no custom agents\n                          </EmptyTitle>\n                          <EmptyDescription className=\"text-xs\">\n                            Custom agents are reusable instructions and tools in\n                            your repository.\n                          </EmptyDescription>\n                        </EmptyHeader>\n                        <EmptyContent>\n                          <Button variant=\"outline\" size=\"sm\">\n                            Create Custom Agent\n                          </Button>\n                        </EmptyContent>\n                      </Empty>\n                    </PopoverContent>\n                  </Popover>\n                  <Tooltip>\n                    <TooltipTrigger\n                      render={\n                        <InputGroupButton\n                          variant=\"ghost\"\n                          size=\"icon-sm\"\n                          className=\"ml-auto\"\n                        />\n                      }\n                    >\n                      <IconPlaceholder\n                        lucide=\"SendIcon\"\n                        hugeicons=\"SentIcon\"\n                        tabler=\"IconSend\"\n                        phosphor=\"PaperPlaneTiltIcon\"\n                        remixicon=\"RiSendPlaneLine\"\n                      />\n                    </TooltipTrigger>\n                    <TooltipContent className=\"flex items-center gap-2 pr-2\">\n                      Start Task <Kbd>⏎</Kbd>\n                    </TooltipContent>\n                  </Tooltip>\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n          </PopoverContent>\n        </Popover>\n      </div>\n    </Example>\n  )\n}\nfunction Navbar() {\n  return (\n    <Example title=\"Account Menu\">\n      <header className=\"flex h-14 w-full items-center gap-2\">\n        <Drawer direction=\"left\">\n          <DrawerTrigger asChild>\n            <Button variant=\"outline\" size=\"icon\">\n              <IconPlaceholder\n                lucide=\"MenuIcon\"\n                hugeicons=\"Menu09Icon\"\n                tabler=\"IconMenu\"\n                phosphor=\"ListIcon\"\n                remixicon=\"RiListUnordered\"\n              />\n              <span className=\"sr-only\">Open menu</span>\n            </Button>\n          </DrawerTrigger>\n          <DrawerContent className=\"max-w-72\">\n            <DrawerHeader className=\"flex flex-row items-center justify-between px-5 pb-0\">\n              <DrawerTitle>Menu</DrawerTitle>\n              <DrawerClose asChild>\n                <Button variant=\"ghost\" size=\"icon-sm\" >\n                  <IconPlaceholder\n                    lucide=\"XIcon\"\n                    tabler=\"IconX\"\n                    hugeicons=\"Cancel01Icon\"\n                    phosphor=\"XIcon\"\n                    remixicon=\"RiCloseLine\"\n                  />\n                  <span className=\"sr-only\">Close</span>\n                </Button>\n              </DrawerClose>\n            </DrawerHeader>\n            <div className=\"p-2\">\n              <ItemGroup className=\"gap-px\">\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"HomeIcon\"\n                      tabler=\"IconHome\"\n                      hugeicons=\"HomeIcon\"\n                      phosphor=\"HouseIcon\"\n                      remixicon=\"RiHomeLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Home</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"CircleIcon\"\n                      tabler=\"IconCircle\"\n                      hugeicons=\"CircleIcon\"\n                      phosphor=\"CircleIcon\"\n                      remixicon=\"RiCircleLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Issues</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"GitBranchIcon\"\n                      tabler=\"IconGitBranch\"\n                      hugeicons=\"GitBranchIcon\"\n                      phosphor=\"GitBranchIcon\"\n                      remixicon=\"RiGitBranchLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Pull requests</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"LayoutGridIcon\"\n                      tabler=\"IconLayoutGrid\"\n                      hugeicons=\"GridIcon\"\n                      phosphor=\"GridFourIcon\"\n                      remixicon=\"RiGridLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Projects</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"MailIcon\"\n                      tabler=\"IconMail\"\n                      hugeicons=\"MailIcon\"\n                      phosphor=\"EnvelopeIcon\"\n                      remixicon=\"RiMailLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Discussions</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"ServerIcon\"\n                      tabler=\"IconServer\"\n                      hugeicons=\"ServerStackIcon\"\n                      phosphor=\"HardDrivesIcon\"\n                      remixicon=\"RiHardDriveLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Codespaces</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"BotIcon\"\n                      tabler=\"IconRobot\"\n                      hugeicons=\"RoboticIcon\"\n                      phosphor=\"RobotIcon\"\n                      remixicon=\"RiRobotLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Copilot</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"SparklesIcon\"\n                      tabler=\"IconSparkles\"\n                      hugeicons=\"SparklesIcon\"\n                      phosphor=\"SparkleIcon\"\n                      remixicon=\"RiSparklingLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Spark</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <ItemSeparator />\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"SearchIcon\"\n                      tabler=\"IconSearch\"\n                      hugeicons=\"SearchIcon\"\n                      phosphor=\"MagnifyingGlassIcon\"\n                      remixicon=\"RiSearchLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Explore</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"ShoppingBagIcon\"\n                      tabler=\"IconShoppingBag\"\n                      hugeicons=\"ShoppingBasket01Icon\"\n                      phosphor=\"BagIcon\"\n                      remixicon=\"RiShoppingBagLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Marketplace</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"LinkIcon\"\n                      tabler=\"IconLink\"\n                      hugeicons=\"LinkIcon\"\n                      phosphor=\"LinkIcon\"\n                      remixicon=\"RiLinksLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>MCP registry</ItemTitle>\n                  </ItemContent>\n                </Item>\n              </ItemGroup>\n            </div>\n          </DrawerContent>\n        </Drawer>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <Button\n                variant=\"ghost\"\n                size=\"icon\"\n                className=\"ml-auto rounded-full\"\n              />\n            }\n          >\n            <Avatar>\n              <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"shadcn\" />\n              <AvatarFallback>SC</AvatarFallback>\n            </Avatar>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-56\" align=\"end\">\n            <DropdownMenuGroup>\n              <DropdownMenuLabel className=\"p-0 font-normal\">\n                <Item className=\"px-2 py-1 pb-0.5\" size=\"sm\">\n                  <ItemMedia>\n                    <Avatar>\n                      <AvatarImage\n                        src=\"https://github.com/shadcn.png\"\n                        alt=\"shadcn\"\n                      />\n                      <AvatarFallback>SC</AvatarFallback>\n                    </Avatar>\n                  </ItemMedia>\n                  <ItemContent className=\"gap-0\">\n                    <ItemTitle className=\"text-foreground text-sm\">\n                      shadcn\n                    </ItemTitle>\n                    <ItemDescription className=\"text-xs\">\n                      shadcn@example.com\n                    </ItemDescription>\n                  </ItemContent>\n                </Item>\n              </DropdownMenuLabel>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SmileIcon\"\n                  tabler=\"IconMoodSmile\"\n                  hugeicons=\"SmileIcon\"\n                  phosphor=\"SmileyIcon\"\n                  remixicon=\"RiEmotionLine\"\n                />\n                Set status\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CircleAlertIcon\"\n                  tabler=\"IconExclamationCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                  phosphor=\"WarningCircleIcon\"\n                  remixicon=\"RiErrorWarningLine\"\n                />\n                Single sign-on\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"UserIcon\"\n                  tabler=\"IconUser\"\n                  hugeicons=\"UserIcon\"\n                  phosphor=\"UserIcon\"\n                  remixicon=\"RiUserLine\"\n                />\n                Profile\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"FolderIcon\"\n                  tabler=\"IconFolder\"\n                  hugeicons=\"FolderIcon\"\n                  phosphor=\"FolderIcon\"\n                  remixicon=\"RiFolderLine\"\n                />\n                Repositories\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"StarIcon\"\n                  tabler=\"IconStar\"\n                  hugeicons=\"StarIcon\"\n                  phosphor=\"StarIcon\"\n                  remixicon=\"RiStarLine\"\n                />\n                Stars\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CodeIcon\"\n                  tabler=\"IconCode\"\n                  hugeicons=\"CodeIcon\"\n                  phosphor=\"CodeIcon\"\n                  remixicon=\"RiCodeLine\"\n                />\n                Gists\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"FolderIcon\"\n                  tabler=\"IconFolder\"\n                  hugeicons=\"FolderIcon\"\n                  phosphor=\"FolderIcon\"\n                  remixicon=\"RiFolderLine\"\n                />\n                Organizations\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"ServerIcon\"\n                  tabler=\"IconServer\"\n                  hugeicons=\"ServerStackIcon\"\n                  phosphor=\"HardDrivesIcon\"\n                  remixicon=\"RiHardDriveLine\"\n                />\n                Enterprises\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"HeartIcon\"\n                  tabler=\"IconHeart\"\n                  hugeicons=\"FavouriteIcon\"\n                  phosphor=\"HeartIcon\"\n                  remixicon=\"RiHeartLine\"\n                />\n                Sponsors\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SettingsIcon\"\n                  tabler=\"IconSettings\"\n                  hugeicons=\"SettingsIcon\"\n                  phosphor=\"GearIcon\"\n                  remixicon=\"RiSettingsLine\"\n                />\n                Settings\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"BotIcon\"\n                  tabler=\"IconRobot\"\n                  hugeicons=\"RoboticIcon\"\n                  phosphor=\"RobotIcon\"\n                  remixicon=\"RiRobotLine\"\n                />\n                Copilot settings\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SparklesIcon\"\n                  tabler=\"IconSparkles\"\n                  hugeicons=\"SparklesIcon\"\n                  phosphor=\"SparkleIcon\"\n                  remixicon=\"RiSparklingLine\"\n                />\n                Feature preview\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"MonitorIcon\"\n                  tabler=\"IconDeviceDesktop\"\n                  hugeicons=\"ComputerIcon\"\n                  phosphor=\"MonitorIcon\"\n                  remixicon=\"RiComputerLine\"\n                />\n                Appearance\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"UserIcon\"\n                  tabler=\"IconUser\"\n                  hugeicons=\"UserIcon\"\n                  phosphor=\"UserIcon\"\n                  remixicon=\"RiUserLine\"\n                />\n                Accessibility\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUpIcon\"\n                  phosphor=\"ArrowUpIcon\"\n                  remixicon=\"RiArrowUpLine\"\n                />\n                Upgrade\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"LogOutIcon\"\n                  tabler=\"IconLogout\"\n                  hugeicons=\"LogoutIcon\"\n                  phosphor=\"SignOutIcon\"\n                  remixicon=\"RiLogoutBoxLine\"\n                />\n                Sign out\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </header>\n    </Example>\n  )\n}\nconst usernames = [\n  \"shadcn\",\n  \"vercel\",\n  \"nextjs\",\n  \"tailwindlabs\",\n  \"typescript-lang\",\n  \"eslint\",\n  \"prettier\",\n  \"babel\",\n  \"webpack\",\n  \"rollup\",\n  \"parcel\",\n  \"vite\",\n  \"react\",\n  \"vue\",\n  \"angular\",\n  \"solid\",\n]\nfunction Contributors() {\n  return (\n    <Example title=\"Contributors\" className=\"items-center lg:p-16\">\n      <Card className=\"max-w-sm\">\n        <CardHeader>\n          <CardTitle>\n            Contributors <Badge variant=\"secondary\">312</Badge>\n          </CardTitle>\n        </CardHeader>\n        <CardContent>\n          <div className=\"flex flex-wrap gap-2\">\n            {usernames.map((username) => (\n              <Avatar key={username}>\n                <AvatarImage\n                  src={`https://github.com/${username}.png`}\n                  alt={username}\n                />\n                <AvatarFallback>{username.charAt(0)}</AvatarFallback>\n              </Avatar>\n            ))}\n          </div>\n        </CardContent>\n        <CardFooter>\n          <a href=\"#\" className=\"text-sm underline underline-offset-4\">\n            + 810 contributors\n          </a>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\nfunction Profile() {\n  return (\n    <Example title=\"Profile\" className=\"items-center justify-center\">\n      <Card className=\"mx-auto w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>Profile</CardTitle>\n          <CardDescription>Manage your profile information.</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form id=\"profile\">\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"name\">Name</FieldLabel>\n                <Input id=\"name\" placeholder=\"shadcn\" />\n                <FieldDescription>\n                  Your name may appear around GitHub where you contribute or are\n                  mentioned. You can remove it at any time.\n                </FieldDescription>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"email\">Public Email</FieldLabel>\n                <NativeSelect id=\"email\">\n                  <NativeSelectOption value=\"m@shadcn.com\">\n                    m@shadcn.com\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"m@gmail.com\">\n                    m@gmail.com\n                  </NativeSelectOption>\n                </NativeSelect>\n                <FieldDescription>\n                  You can manage verified email addresses in your{\" \"}\n                  <a href=\"#email-settings\">email settings</a>.\n                </FieldDescription>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"bio\">Bio</FieldLabel>\n                <Textarea\n                  id=\"bio\"\n                  placeholder=\"Tell us a little bit about yourself\"\n                />\n                <FieldDescription>\n                  You can <span>@mention</span> other users and organizations to\n                  link to them.\n                </FieldDescription>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button form=\"profile\">Save Profile</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\nfunction ContributionsActivity() {\n  return (\n    <Example title=\"Contributions Activity\" className=\"justify-center\">\n      <Card className=\"mx-auto w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>Contributions & Activity</CardTitle>\n          <CardDescription>\n            Manage your contributions and activity visibility.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form id=\"contributions-activity\">\n            <FieldGroup>\n              <FieldSet>\n                <FieldLegend className=\"sr-only\">\n                  Contributions & activity\n                </FieldLegend>\n                <FieldGroup className=\"gap-3\">\n                  <Field orientation=\"horizontal\">\n                    <Checkbox id=\"private-profile\" />\n                    <FieldContent>\n                      <FieldLabel\n                        htmlFor=\"private-profile\"\n                        className=\"font-normal\"\n                      >\n                        Make profile private and hide activity\n                      </FieldLabel>\n                      <FieldDescription>\n                        Enabling this will hide your contributions and activity\n                        from your GitHub profile and from social features like\n                        followers, stars, feeds, leaderboards and releases.\n                      </FieldDescription>\n                    </FieldContent>\n                  </Field>\n                  <Field orientation=\"horizontal\">\n                    <Checkbox id=\"private-contributions\" defaultChecked />\n                    <FieldContent>\n                      <FieldLabel\n                        htmlFor=\"private-contributions\"\n                        className=\"font-normal\"\n                      >\n                        Include private contributions on my profile\n                      </FieldLabel>\n                      <FieldDescription>\n                        Your contribution graph, achievements, and activity\n                        overview will show your private contributions without\n                        revealing any repository or organization information.{\" \"}\n                        <a href=\"#read-more\">Read more</a>.\n                      </FieldDescription>\n                    </FieldContent>\n                  </Field>\n                </FieldGroup>\n              </FieldSet>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button form=\"contributions-activity\">Save Changes</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\nconst users = [\n  \"shadcn\",\n  \"maxleiter\",\n  \"evilrabbit\",\n  \"pranathip\",\n  \"jorgezreik\",\n  \"shuding\",\n  \"rauchg\",\n]\nfunction AssignIssue() {\n  const anchor = useComboboxAnchor()\n  return (\n    <Example title=\"User Select\" className=\"items-center justify-center\">\n      <Card className=\"w-full max-w-sm\" size=\"sm\">\n        <CardHeader className=\"border-b\">\n          <CardTitle className=\"text-sm\">Assign Issue</CardTitle>\n          <CardDescription className=\"text-sm\">\n            Select users to assign to this issue.\n          </CardDescription>\n          <CardAction>\n            <Tooltip>\n              <TooltipTrigger\n                render={<Button variant=\"outline\" size=\"icon-xs\" />}\n              >\n                <IconPlaceholder\n                  lucide=\"PlusIcon\"\n                  tabler=\"IconPlus\"\n                  hugeicons=\"PlusSignIcon\"\n                  phosphor=\"PlusIcon\"\n                  remixicon=\"RiAddLine\"\n                />\n              </TooltipTrigger>\n              <TooltipContent>Add user</TooltipContent>\n            </Tooltip>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <Combobox\n            multiple\n            autoHighlight\n            items={users}\n            defaultValue={[users[0]]}\n          >\n            <ComboboxChips ref={anchor}>\n              <ComboboxValue>\n                {(values) => (\n                  <React.Fragment>\n                    {values.map((username: string) => (\n                      <ComboboxChip key={username}>\n                        <Avatar className=\"size-4\">\n                          <AvatarImage\n                            src={`https://github.com/${username}.png`}\n                            alt={username}\n                          />\n                          <AvatarFallback>{username.charAt(0)}</AvatarFallback>\n                        </Avatar>\n                        {username}\n                      </ComboboxChip>\n                    ))}\n                    <ComboboxChipsInput\n                      placeholder={\n                        values.length > 0 ? undefined : \"Select a item...\"\n                      }\n                    />\n                  </React.Fragment>\n                )}\n              </ComboboxValue>\n            </ComboboxChips>\n            <ComboboxContent anchor={anchor}>\n              <ComboboxEmpty>No users found.</ComboboxEmpty>\n              <ComboboxList>\n                {(username) => (\n                  <ComboboxItem key={username} value={username}>\n                    <Avatar className=\"size-5\">\n                      <AvatarImage\n                        src={`https://github.com/${username}.png`}\n                        alt={username}\n                      />\n                      <AvatarFallback>{username.charAt(0)}</AvatarFallback>\n                    </Avatar>\n                    {username}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-vega/components/example\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/base-vega/ui/avatar\"\nimport { Badge } from \"@/registry/base-vega/ui/badge\"\nimport { Button } from \"@/registry/base-vega/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/base-vega/ui/card\"\nimport { Checkbox } from \"@/registry/base-vega/ui/checkbox\"\nimport {\n  Combobox,\n  ComboboxChip,\n  ComboboxChips,\n  ComboboxChipsInput,\n  ComboboxContent,\n  ComboboxEmpty,\n  ComboboxItem,\n  ComboboxList,\n  ComboboxValue,\n  useComboboxAnchor,\n} from \"@/registry/base-vega/ui/combobox\"\nimport {\n  Command,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n} from \"@/registry/base-vega/ui/command\"\nimport {\n  Drawer,\n  DrawerClose,\n  DrawerContent,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerTrigger,\n} from \"@/registry/base-vega/ui/drawer\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"@/registry/base-vega/ui/dropdown-menu\"\nimport {\n  Empty,\n  EmptyContent,\n  EmptyDescription,\n  EmptyHeader,\n  EmptyMedia,\n  EmptyTitle,\n} from \"@/registry/base-vega/ui/empty\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n} from \"@/registry/base-vega/ui/field\"\nimport { Input } from \"@/registry/base-vega/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n  InputGroupTextarea,\n} from \"@/registry/base-vega/ui/input-group\"\nimport {\n  Item,\n  ItemActions,\n  ItemContent,\n  ItemDescription,\n  ItemGroup,\n  ItemMedia,\n  ItemSeparator,\n  ItemTitle,\n} from \"@/registry/base-vega/ui/item\"\nimport { Kbd } from \"@/registry/base-vega/ui/kbd\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/base-vega/ui/native-select\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/base-vega/ui/popover\"\nimport { Separator } from \"@/registry/base-vega/ui/separator\"\nimport { Spinner } from \"@/registry/base-vega/ui/spinner\"\nimport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n} from \"@/registry/base-vega/ui/tabs\"\nimport { Textarea } from \"@/registry/base-vega/ui/textarea\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/base-vega/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function GithubBlock() {\n  return (\n    <ExampleWrapper>\n      <CodespacesCard />\n      <AssignIssue />\n      <Navbar />\n      <RepositoryToolbar />\n      <Profile />\n      <ContributionsActivity />\n      <Contributors />\n    </ExampleWrapper>\n  )\n}\nfunction CodespacesCard() {\n  const [isCreatingCodespace, setIsCreatingCodespace] = React.useState(false)\n  return (\n    <Example title=\"Codespaces\" className=\"min-h-[550px] lg:p-12\">\n      <Card className=\"mx-auto w-full max-w-sm\" size=\"sm\">\n        <CardContent>\n          <Tabs defaultValue=\"codespaces\">\n            <TabsList className=\"w-full\">\n              <TabsTrigger value=\"codespaces\">Codespaces</TabsTrigger>\n              <TabsTrigger value=\"local\">Local</TabsTrigger>\n            </TabsList>\n            <TabsContent value=\"codespaces\">\n              <Item size=\"sm\" className=\"px-1 pt-2\">\n                <ItemContent>\n                  <ItemTitle>Codespaces</ItemTitle>\n                  <ItemDescription>\n                    Your workspaces in the cloud\n                  </ItemDescription>\n                </ItemContent>\n                <ItemActions>\n                  <Tooltip>\n                    <TooltipTrigger\n                      render={<Button variant=\"ghost\" size=\"icon-sm\" />}\n                    >\n                      <IconPlaceholder\n                        lucide=\"PlusIcon\"\n                        tabler=\"IconPlus\"\n                        hugeicons=\"PlusSignIcon\"\n                        phosphor=\"PlusIcon\"\n                        remixicon=\"RiAddLine\"\n                      />\n                    </TooltipTrigger>\n                    <TooltipContent side=\"bottom\">\n                      Create a codespace on main\n                    </TooltipContent>\n                  </Tooltip>\n                  <DropdownMenu>\n                    <Tooltip>\n                      <TooltipTrigger\n                        render={\n                          <DropdownMenuTrigger\n                            render={<Button variant=\"ghost\" size=\"icon-sm\" />}\n                          />\n                        }\n                      >\n                        <IconPlaceholder\n                          lucide=\"MoreHorizontalIcon\"\n                          tabler=\"IconDots\"\n                          hugeicons=\"MoreHorizontalCircle01Icon\"\n                          phosphor=\"DotsThreeOutlineIcon\"\n                          remixicon=\"RiMoreLine\"\n                        />\n                      </TooltipTrigger>\n                      <TooltipContent side=\"bottom\">\n                        Codespace repository configuration\n                      </TooltipContent>\n                    </Tooltip>\n                    <DropdownMenuContent align=\"end\" className=\"w-56\">\n                      <DropdownMenuGroup>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"PlusIcon\"\n                            tabler=\"IconPlus\"\n                            hugeicons=\"PlusSignIcon\"\n                            phosphor=\"PlusIcon\"\n                            remixicon=\"RiAddLine\"\n                          />\n                          New with options...\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"ContainerIcon\"\n                            tabler=\"IconBox\"\n                            hugeicons=\"CubeIcon\"\n                            phosphor=\"CubeIcon\"\n                            remixicon=\"RiBox1Line\"\n                          />\n                          Configure dev container\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"ZapIcon\"\n                            tabler=\"IconBolt\"\n                            hugeicons=\"ZapIcon\"\n                            phosphor=\"LightningIcon\"\n                            remixicon=\"RiFlashlightLine\"\n                          />\n                          Set up prebuilds\n                        </DropdownMenuItem>\n                      </DropdownMenuGroup>\n                      <DropdownMenuSeparator />\n                      <DropdownMenuGroup>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"ServerIcon\"\n                            tabler=\"IconServer\"\n                            hugeicons=\"ServerStackIcon\"\n                            phosphor=\"HardDrivesIcon\"\n                            remixicon=\"RiHardDriveLine\"\n                          />\n                          Manage codespaces\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"ShareIcon\"\n                            tabler=\"IconShare2\"\n                            hugeicons=\"Share03Icon\"\n                            phosphor=\"ShareIcon\"\n                            remixicon=\"RiShareLine\"\n                          />\n                          Share deep link\n                        </DropdownMenuItem>\n                        <DropdownMenuItem>\n                          <IconPlaceholder\n                            lucide=\"InfoIcon\"\n                            tabler=\"IconInfoCircle\"\n                            hugeicons=\"AlertCircleIcon\"\n                            phosphor=\"InfoIcon\"\n                            remixicon=\"RiInformationLine\"\n                          />\n                          What are codespaces?\n                        </DropdownMenuItem>\n                      </DropdownMenuGroup>\n                    </DropdownMenuContent>\n                  </DropdownMenu>\n                </ItemActions>\n              </Item>\n              <Separator className=\"-mx-2 my-2 w-auto!\" />\n              <Empty className=\"p-4\">\n                <EmptyHeader>\n                  <EmptyMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"ServerIcon\"\n                      tabler=\"IconServer\"\n                      hugeicons=\"ServerStackIcon\"\n                      phosphor=\"HardDrivesIcon\"\n                      remixicon=\"RiHardDriveLine\"\n                    />\n                  </EmptyMedia>\n                  <EmptyTitle>No codespaces</EmptyTitle>\n                  <EmptyDescription>\n                    You don&apos;t have any codespaces with this repository\n                    checked out\n                  </EmptyDescription>\n                </EmptyHeader>\n                <EmptyContent>\n                  <Button\n                    size=\"sm\"\n                    onClick={() => {\n                      setIsCreatingCodespace(true)\n                      setTimeout(() => {\n                        setIsCreatingCodespace(false)\n                      }, 2000)\n                    }}\n                    disabled={isCreatingCodespace}\n                  >\n                    {isCreatingCodespace ? (\n                      <Spinner data-icon=\"inline-start\" />\n                    ) : (\n                      \"\"\n                    )}\n                    Create Codespace\n                  </Button>\n                  <a\n                    href=\"#learn-more\"\n                    className=\"text-muted-foreground text-xs underline underline-offset-4\"\n                  >\n                    Learn more about codespaces\n                  </a>\n                </EmptyContent>\n              </Empty>\n              <Separator className=\"-mx-2 my-2 w-auto!\" />\n              <div className=\"text-muted-foreground p-1.5 text-xs\">\n                Codespace usage for this repository is paid for by{\" \"}\n                <span className=\"font-medium\">shadcn</span>.\n              </div>\n            </TabsContent>\n            <TabsContent value=\"local\">\n              <Item size=\"sm\" className=\"hidden p-0\">\n                <ItemContent>\n                  <ItemTitle className=\"gap-2\">\n                    <IconPlaceholder\n                      lucide=\"TerminalIcon\"\n                      tabler=\"IconTerminal\"\n                      hugeicons=\"ComputerTerminal01Icon\"\n                      phosphor=\"TerminalIcon\"\n                      remixicon=\"RiTerminalBoxLine\"\n                      className=\"size-4\"\n                    />\n                    Clone\n                  </ItemTitle>\n                </ItemContent>\n                <ItemActions>\n                  <Tooltip>\n                    <TooltipTrigger\n                      render={<Button variant=\"ghost\" size=\"icon\" />}\n                    >\n                      <IconPlaceholder\n                        lucide=\"InfoIcon\"\n                        tabler=\"IconInfoCircle\"\n                        hugeicons=\"AlertCircleIcon\"\n                        phosphor=\"InfoIcon\"\n                        remixicon=\"RiInformationLine\"\n                      />\n                    </TooltipTrigger>\n                    <TooltipContent side=\"left\">\n                      Which remote URL should I use?\n                    </TooltipContent>\n                  </Tooltip>\n                </ItemActions>\n              </Item>\n              <Tabs defaultValue=\"https\">\n                <TabsList\n                  variant=\"line\"\n                  className=\"w-full justify-start border-b *:[button]:flex-0\"\n                >\n                  <TabsTrigger value=\"https\">HTTPS</TabsTrigger>\n                  <TabsTrigger value=\"ssh\">SSH</TabsTrigger>\n                  <TabsTrigger value=\"cli\">GitHub CLI</TabsTrigger>\n                </TabsList>\n                <div className=\"bg-muted/30 rounded-md border p-2\">\n                  <TabsContent value=\"https\">\n                    <Field className=\"gap-2\">\n                      <FieldLabel htmlFor=\"https-url\" className=\"sr-only\">\n                        HTTPS URL\n                      </FieldLabel>\n                      <InputGroup>\n                        <InputGroupAddon align=\"inline-end\">\n                          <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                              phosphor=\"CopyIcon\"\n                              remixicon=\"RiFileCopyLine\"\n                            />\n                          </InputGroupButton>\n                        </InputGroupAddon>\n                        <InputGroupInput\n                          id=\"https-url\"\n                          defaultValue=\"https://github.com/shadcn-ui/ui.git\"\n                          readOnly\n                        />\n                      </InputGroup>\n                      <FieldDescription>\n                        Clone using the web URL.\n                      </FieldDescription>\n                    </Field>\n                  </TabsContent>\n                  <TabsContent value=\"ssh\">\n                    <Field className=\"gap-2\">\n                      <FieldLabel htmlFor=\"ssh-url\" className=\"sr-only\">\n                        SSH URL\n                      </FieldLabel>\n                      <InputGroup>\n                        <InputGroupAddon align=\"inline-end\">\n                          <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                              phosphor=\"CopyIcon\"\n                              remixicon=\"RiFileCopyLine\"\n                            />\n                          </InputGroupButton>\n                        </InputGroupAddon>\n                        <InputGroupInput\n                          id=\"ssh-url\"\n                          defaultValue=\"git@github.com:shadcn-ui/ui.git\"\n                          readOnly\n                        />\n                      </InputGroup>\n                      <FieldDescription>\n                        Use a password-protected SSH key.\n                      </FieldDescription>\n                    </Field>\n                  </TabsContent>\n                  <TabsContent value=\"cli\">\n                    <Field className=\"gap-2\">\n                      <FieldLabel htmlFor=\"cli-command\" className=\"sr-only\">\n                        CLI Command\n                      </FieldLabel>\n                      <InputGroup>\n                        <InputGroupAddon align=\"inline-end\">\n                          <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n                            <IconPlaceholder\n                              lucide=\"CopyIcon\"\n                              tabler=\"IconCopy\"\n                              hugeicons=\"Copy01Icon\"\n                              phosphor=\"CopyIcon\"\n                              remixicon=\"RiFileCopyLine\"\n                            />\n                          </InputGroupButton>\n                        </InputGroupAddon>\n                        <InputGroupInput\n                          id=\"cli-command\"\n                          defaultValue=\"gh repo clone shadcn-ui/ui\"\n                          readOnly\n                        />\n                      </InputGroup>\n                      <FieldDescription>\n                        Work fast with our official CLI.{\" \"}\n                        <a href=\"#learn-more\">Learn more</a>\n                      </FieldDescription>\n                    </Field>\n                  </TabsContent>\n                </div>\n              </Tabs>\n              <Separator className=\"-mx-2 my-2 w-auto!\" />\n              <div className=\"flex flex-col\">\n                <Button\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  className=\"justify-start gap-1.5\"\n                >\n                  <IconPlaceholder\n                    lucide=\"MonitorIcon\"\n                    tabler=\"IconDeviceDesktop\"\n                    hugeicons=\"ComputerIcon\"\n                    phosphor=\"MonitorIcon\"\n                    remixicon=\"RiComputerLine\"\n                    data-icon=\"inline-start\"\n                  />\n                  Open with GitHub Desktop\n                </Button>\n                <Button\n                  variant=\"ghost\"\n                  size=\"sm\"\n                  className=\"justify-start gap-1.5\"\n                >\n                  <IconPlaceholder\n                    lucide=\"DownloadIcon\"\n                    tabler=\"IconDownload\"\n                    hugeicons=\"DownloadIcon\"\n                    phosphor=\"DownloadIcon\"\n                    remixicon=\"RiDownloadLine\"\n                    data-icon=\"inline-start\"\n                  />\n                  Download ZIP\n                </Button>\n              </div>\n            </TabsContent>\n          </Tabs>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\nfunction RepositoryToolbar() {\n  const [selectedBranch, setSelectedBranch] = React.useState(\"main\")\n  return (\n    <Example title=\"Repository Toolbar\">\n      <div className=\"flex items-center gap-2\">\n        <InputGroup>\n          <InputGroupInput placeholder=\"Go to file\" />\n          <InputGroupAddon align=\"inline-start\">\n            <InputGroupButton variant=\"ghost\" size=\"icon-xs\">\n              <IconPlaceholder\n                lucide=\"SearchIcon\"\n                tabler=\"IconSearch\"\n                hugeicons=\"SearchIcon\"\n                phosphor=\"MagnifyingGlassIcon\"\n                remixicon=\"RiSearchLine\"\n              />\n            </InputGroupButton>\n          </InputGroupAddon>\n          <InputGroupAddon align=\"inline-end\">\n            <Kbd>t</Kbd>\n          </InputGroupAddon>\n        </InputGroup>\n        <DropdownMenu>\n          <DropdownMenuTrigger render={<Button variant=\"outline\" />}>\n            Add File\n            <IconPlaceholder\n              lucide=\"ChevronDownIcon\"\n              tabler=\"IconChevronDown\"\n              hugeicons=\"ArrowDown01Icon\"\n              phosphor=\"CaretDownIcon\"\n              remixicon=\"RiArrowDownSLine\"\n              data-icon=\"inline-end\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"PlusIcon\"\n                  tabler=\"IconPlus\"\n                  hugeicons=\"PlusSignIcon\"\n                  phosphor=\"PlusIcon\"\n                  remixicon=\"RiAddLine\"\n                />\n                Create new file\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"UploadIcon\"\n                  hugeicons=\"Upload01Icon\"\n                  tabler=\"IconUpload\"\n                  phosphor=\"UploadIcon\"\n                  remixicon=\"RiUploadLine\"\n                />\n                Upload files\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <Popover>\n          <Tooltip>\n            <TooltipTrigger\n              render={\n                <PopoverTrigger\n                  render={<Button variant=\"outline\" size=\"icon\" />}\n                />\n              }\n            >\n              <IconPlaceholder\n                lucide=\"CloudCogIcon\"\n                hugeicons=\"AiCloud01Icon\"\n                tabler=\"IconCloudCog\"\n                phosphor=\"CloudArrowUpIcon\"\n                remixicon=\"RiUploadCloudLine\"\n              />\n            </TooltipTrigger>\n            <TooltipContent>New Agent Task</TooltipContent>\n          </Tooltip>\n          <PopoverContent side=\"bottom\" align=\"end\" className=\"w-96\">\n            <Field>\n              <FieldLabel htmlFor=\"new-agent-task\">New Agent Task</FieldLabel>\n              <InputGroup>\n                <InputGroupTextarea placeholder=\"Describe your task in natural language.\"></InputGroupTextarea>\n                <InputGroupAddon align=\"block-end\">\n                  <Popover>\n                    <Tooltip>\n                      <PopoverTrigger\n                        render={\n                          <TooltipTrigger\n                            render={\n                              <InputGroupButton\n                                variant=\"outline\"\n                                size=\"icon-sm\"\n                              />\n                            }\n                          />\n                        }\n                      >\n                        <IconPlaceholder\n                          lucide=\"GitBranchIcon\"\n                          hugeicons=\"GitBranchIcon\"\n                          tabler=\"IconGitBranch\"\n                          phosphor=\"GitBranchIcon\"\n                          remixicon=\"RiGitBranchLine\"\n                        />\n                      </PopoverTrigger>\n                      <TooltipContent>Select a branch</TooltipContent>\n                    </Tooltip>\n                    <PopoverContent side=\"bottom\" align=\"start\" className=\"p-1\">\n                      <Field>\n                        <FieldLabel htmlFor=\"select-branch\" className=\"sr-only\">\n                          Select a Branch\n                        </FieldLabel>\n                        <Command>\n                          <CommandInput\n                            id=\"select-branch\"\n                            placeholder=\"Find a branch\"\n                          />\n                          <CommandEmpty>No branches found</CommandEmpty>\n                          <CommandList>\n                            <CommandGroup>\n                              {[\n                                \"main\",\n                                \"develop\",\n                                \"feature/123\",\n                                \"feature/user-authentication\",\n                                \"feature/dashboard-redesign\",\n                                \"bugfix/login-error\",\n                                \"hotfix/security-patch\",\n                                \"release/v2.0.0\",\n                                \"feature/api-integration\",\n                                \"bugfix/memory-leak\",\n                                \"feature/dark-mode\",\n                                \"feature/responsive-design\",\n                                \"bugfix/typo-fix\",\n                                \"feature/search-functionality\",\n                                \"release/v1.9.0\",\n                                \"feature/notifications\",\n                                \"bugfix/cache-issue\",\n                                \"feature/payment-gateway\",\n                                \"hotfix/critical-bug\",\n                                \"feature/admin-panel\",\n                                \"bugfix/validation-error\",\n                                \"feature/analytics\",\n                                \"release/v2.1.0\",\n                              ].map((branch) => (\n                                <CommandItem\n                                  key={branch}\n                                  value={branch}\n                                  onSelect={() => setSelectedBranch(branch)}\n                                  data-checked={selectedBranch === branch}\n                                >\n                                  {branch}\n                                </CommandItem>\n                              ))}\n                            </CommandGroup>\n                          </CommandList>\n                        </Command>\n                      </Field>\n                    </PopoverContent>\n                  </Popover>\n                  <Popover>\n                    <Tooltip>\n                      <PopoverTrigger\n                        render={\n                          <TooltipTrigger\n                            render={\n                              <InputGroupButton\n                                variant=\"outline\"\n                                size=\"icon-sm\"\n                              />\n                            }\n                          />\n                        }\n                      >\n                        <IconPlaceholder\n                          lucide=\"BotIcon\"\n                          hugeicons=\"RoboticIcon\"\n                          tabler=\"IconRobot\"\n                          phosphor=\"RobotIcon\"\n                          remixicon=\"RiRobotLine\"\n                        />\n                      </PopoverTrigger>\n                      <TooltipContent>Select Agent</TooltipContent>\n                    </Tooltip>\n                    <PopoverContent side=\"bottom\" align=\"start\">\n                      <Empty className=\"gap-4 p-0\">\n                        <EmptyHeader>\n                          <EmptyTitle className=\"text-sm\">\n                            This repository has no custom agents\n                          </EmptyTitle>\n                          <EmptyDescription className=\"text-xs\">\n                            Custom agents are reusable instructions and tools in\n                            your repository.\n                          </EmptyDescription>\n                        </EmptyHeader>\n                        <EmptyContent>\n                          <Button variant=\"outline\" size=\"sm\">\n                            Create Custom Agent\n                          </Button>\n                        </EmptyContent>\n                      </Empty>\n                    </PopoverContent>\n                  </Popover>\n                  <Tooltip>\n                    <TooltipTrigger\n                      render={\n                        <InputGroupButton\n                          variant=\"ghost\"\n                          size=\"icon-sm\"\n                          className=\"ml-auto\"\n                        />\n                      }\n                    >\n                      <IconPlaceholder\n                        lucide=\"SendIcon\"\n                        hugeicons=\"SentIcon\"\n                        tabler=\"IconSend\"\n                        phosphor=\"PaperPlaneTiltIcon\"\n                        remixicon=\"RiSendPlaneLine\"\n                      />\n                    </TooltipTrigger>\n                    <TooltipContent className=\"flex items-center gap-2 pr-2\">\n                      Start Task <Kbd>⏎</Kbd>\n                    </TooltipContent>\n                  </Tooltip>\n                </InputGroupAddon>\n              </InputGroup>\n            </Field>\n          </PopoverContent>\n        </Popover>\n      </div>\n    </Example>\n  )\n}\nfunction Navbar() {\n  return (\n    <Example title=\"Account Menu\">\n      <header className=\"flex h-14 w-full items-center gap-2\">\n        <Drawer direction=\"left\">\n          <DrawerTrigger asChild>\n            <Button variant=\"outline\" size=\"icon\">\n              <IconPlaceholder\n                lucide=\"MenuIcon\"\n                hugeicons=\"Menu09Icon\"\n                tabler=\"IconMenu\"\n                phosphor=\"ListIcon\"\n                remixicon=\"RiListUnordered\"\n              />\n              <span className=\"sr-only\">Open menu</span>\n            </Button>\n          </DrawerTrigger>\n          <DrawerContent className=\"max-w-72\">\n            <DrawerHeader className=\"flex flex-row items-center justify-between px-5 pb-0\">\n              <DrawerTitle>Menu</DrawerTitle>\n              <DrawerClose asChild>\n                <Button variant=\"ghost\" size=\"icon-sm\">\n                  <IconPlaceholder\n                    lucide=\"XIcon\"\n                    tabler=\"IconX\"\n                    hugeicons=\"Cancel01Icon\"\n                    phosphor=\"XIcon\"\n                    remixicon=\"RiCloseLine\"\n                  />\n                  <span className=\"sr-only\">Close</span>\n                </Button>\n              </DrawerClose>\n            </DrawerHeader>\n            <div className=\"p-2\">\n              <ItemGroup className=\"gap-px\">\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"HomeIcon\"\n                      tabler=\"IconHome\"\n                      hugeicons=\"HomeIcon\"\n                      phosphor=\"HouseIcon\"\n                      remixicon=\"RiHomeLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Home</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"CircleIcon\"\n                      tabler=\"IconCircle\"\n                      hugeicons=\"CircleIcon\"\n                      phosphor=\"CircleIcon\"\n                      remixicon=\"RiCircleLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Issues</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"GitBranchIcon\"\n                      tabler=\"IconGitBranch\"\n                      hugeicons=\"GitBranchIcon\"\n                      phosphor=\"GitBranchIcon\"\n                      remixicon=\"RiGitBranchLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Pull requests</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"LayoutGridIcon\"\n                      tabler=\"IconLayoutGrid\"\n                      hugeicons=\"GridIcon\"\n                      phosphor=\"GridFourIcon\"\n                      remixicon=\"RiGridLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Projects</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"MailIcon\"\n                      tabler=\"IconMail\"\n                      hugeicons=\"MailIcon\"\n                      phosphor=\"EnvelopeIcon\"\n                      remixicon=\"RiMailLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Discussions</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"ServerIcon\"\n                      tabler=\"IconServer\"\n                      hugeicons=\"ServerStackIcon\"\n                      phosphor=\"HardDrivesIcon\"\n                      remixicon=\"RiHardDriveLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Codespaces</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"BotIcon\"\n                      tabler=\"IconRobot\"\n                      hugeicons=\"RoboticIcon\"\n                      phosphor=\"RobotIcon\"\n                      remixicon=\"RiRobotLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Copilot</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"SparklesIcon\"\n                      tabler=\"IconSparkles\"\n                      hugeicons=\"SparklesIcon\"\n                      phosphor=\"SparkleIcon\"\n                      remixicon=\"RiSparklingLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Spark</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <ItemSeparator />\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"SearchIcon\"\n                      tabler=\"IconSearch\"\n                      hugeicons=\"SearchIcon\"\n                      phosphor=\"MagnifyingGlassIcon\"\n                      remixicon=\"RiSearchLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Explore</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"ShoppingBagIcon\"\n                      tabler=\"IconShoppingBag\"\n                      hugeicons=\"ShoppingBasket01Icon\"\n                      phosphor=\"BagIcon\"\n                      remixicon=\"RiShoppingBagLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>Marketplace</ItemTitle>\n                  </ItemContent>\n                </Item>\n                <Item render={<a href=\"#\" />} size=\"xs\">\n                  <ItemMedia variant=\"icon\">\n                    <IconPlaceholder\n                      lucide=\"LinkIcon\"\n                      tabler=\"IconLink\"\n                      hugeicons=\"LinkIcon\"\n                      phosphor=\"LinkIcon\"\n                      remixicon=\"RiLinksLine\"\n                    />\n                  </ItemMedia>\n                  <ItemContent>\n                    <ItemTitle>MCP registry</ItemTitle>\n                  </ItemContent>\n                </Item>\n              </ItemGroup>\n            </div>\n          </DrawerContent>\n        </Drawer>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <Button\n                variant=\"ghost\"\n                size=\"icon\"\n                className=\"ml-auto rounded-full\"\n              />\n            }\n          >\n            <Avatar>\n              <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"shadcn\" />\n              <AvatarFallback>SC</AvatarFallback>\n            </Avatar>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-56\" align=\"end\">\n            <DropdownMenuGroup>\n              <DropdownMenuLabel className=\"p-0 font-normal\">\n                <Item className=\"px-2 py-1 pb-0.5\" size=\"sm\">\n                  <ItemMedia>\n                    <Avatar>\n                      <AvatarImage\n                        src=\"https://github.com/shadcn.png\"\n                        alt=\"shadcn\"\n                      />\n                      <AvatarFallback>SC</AvatarFallback>\n                    </Avatar>\n                  </ItemMedia>\n                  <ItemContent className=\"gap-0\">\n                    <ItemTitle className=\"text-foreground text-sm\">\n                      shadcn\n                    </ItemTitle>\n                    <ItemDescription className=\"text-xs\">\n                      shadcn@example.com\n                    </ItemDescription>\n                  </ItemContent>\n                </Item>\n              </DropdownMenuLabel>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SmileIcon\"\n                  tabler=\"IconMoodSmile\"\n                  hugeicons=\"SmileIcon\"\n                  phosphor=\"SmileyIcon\"\n                  remixicon=\"RiEmotionLine\"\n                />\n                Set status\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CircleAlertIcon\"\n                  tabler=\"IconExclamationCircle\"\n                  hugeicons=\"AlertCircleIcon\"\n                  phosphor=\"WarningCircleIcon\"\n                  remixicon=\"RiErrorWarningLine\"\n                />\n                Single sign-on\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"UserIcon\"\n                  tabler=\"IconUser\"\n                  hugeicons=\"UserIcon\"\n                  phosphor=\"UserIcon\"\n                  remixicon=\"RiUserLine\"\n                />\n                Profile\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"FolderIcon\"\n                  tabler=\"IconFolder\"\n                  hugeicons=\"FolderIcon\"\n                  phosphor=\"FolderIcon\"\n                  remixicon=\"RiFolderLine\"\n                />\n                Repositories\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"StarIcon\"\n                  tabler=\"IconStar\"\n                  hugeicons=\"StarIcon\"\n                  phosphor=\"StarIcon\"\n                  remixicon=\"RiStarLine\"\n                />\n                Stars\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CodeIcon\"\n                  tabler=\"IconCode\"\n                  hugeicons=\"CodeIcon\"\n                  phosphor=\"CodeIcon\"\n                  remixicon=\"RiCodeLine\"\n                />\n                Gists\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"FolderIcon\"\n                  tabler=\"IconFolder\"\n                  hugeicons=\"FolderIcon\"\n                  phosphor=\"FolderIcon\"\n                  remixicon=\"RiFolderLine\"\n                />\n                Organizations\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"ServerIcon\"\n                  tabler=\"IconServer\"\n                  hugeicons=\"ServerStackIcon\"\n                  phosphor=\"HardDrivesIcon\"\n                  remixicon=\"RiHardDriveLine\"\n                />\n                Enterprises\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"HeartIcon\"\n                  tabler=\"IconHeart\"\n                  hugeicons=\"FavouriteIcon\"\n                  phosphor=\"HeartIcon\"\n                  remixicon=\"RiHeartLine\"\n                />\n                Sponsors\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SettingsIcon\"\n                  tabler=\"IconSettings\"\n                  hugeicons=\"SettingsIcon\"\n                  phosphor=\"GearIcon\"\n                  remixicon=\"RiSettingsLine\"\n                />\n                Settings\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"BotIcon\"\n                  tabler=\"IconRobot\"\n                  hugeicons=\"RoboticIcon\"\n                  phosphor=\"RobotIcon\"\n                  remixicon=\"RiRobotLine\"\n                />\n                Copilot settings\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"SparklesIcon\"\n                  tabler=\"IconSparkles\"\n                  hugeicons=\"SparklesIcon\"\n                  phosphor=\"SparkleIcon\"\n                  remixicon=\"RiSparklingLine\"\n                />\n                Feature preview\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"MonitorIcon\"\n                  tabler=\"IconDeviceDesktop\"\n                  hugeicons=\"ComputerIcon\"\n                  phosphor=\"MonitorIcon\"\n                  remixicon=\"RiComputerLine\"\n                />\n                Appearance\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"UserIcon\"\n                  tabler=\"IconUser\"\n                  hugeicons=\"UserIcon\"\n                  phosphor=\"UserIcon\"\n                  remixicon=\"RiUserLine\"\n                />\n                Accessibility\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUpIcon\"\n                  phosphor=\"ArrowUpIcon\"\n                  remixicon=\"RiArrowUpLine\"\n                />\n                Upgrade\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n            <DropdownMenuSeparator />\n            <DropdownMenuGroup>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"LogOutIcon\"\n                  tabler=\"IconLogout\"\n                  hugeicons=\"LogoutIcon\"\n                  phosphor=\"SignOutIcon\"\n                  remixicon=\"RiLogoutBoxLine\"\n                />\n                Sign out\n              </DropdownMenuItem>\n            </DropdownMenuGroup>\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </header>\n    </Example>\n  )\n}\nconst usernames = [\n  \"shadcn\",\n  \"vercel\",\n  \"nextjs\",\n  \"tailwindlabs\",\n  \"typescript-lang\",\n  \"eslint\",\n  \"prettier\",\n  \"babel\",\n  \"webpack\",\n  \"rollup\",\n  \"parcel\",\n  \"vite\",\n  \"react\",\n  \"vue\",\n  \"angular\",\n  \"solid\",\n]\nfunction Contributors() {\n  return (\n    <Example title=\"Contributors\" className=\"items-center lg:p-16\">\n      <Card className=\"max-w-sm\">\n        <CardHeader>\n          <CardTitle>\n            Contributors <Badge variant=\"secondary\">312</Badge>\n          </CardTitle>\n        </CardHeader>\n        <CardContent>\n          <div className=\"flex flex-wrap gap-2\">\n            {usernames.map((username) => (\n              <Avatar key={username}>\n                <AvatarImage\n                  src={`https://github.com/${username}.png`}\n                  alt={username}\n                />\n                <AvatarFallback>{username.charAt(0)}</AvatarFallback>\n              </Avatar>\n            ))}\n          </div>\n        </CardContent>\n        <CardFooter>\n          <a href=\"#\" className=\"text-sm underline underline-offset-4\">\n            + 810 contributors\n          </a>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\nfunction Profile() {\n  return (\n    <Example title=\"Profile\" className=\"items-center justify-center\">\n      <Card className=\"mx-auto w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>Profile</CardTitle>\n          <CardDescription>Manage your profile information.</CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form id=\"profile\">\n            <FieldGroup>\n              <Field>\n                <FieldLabel htmlFor=\"name\">Name</FieldLabel>\n                <Input id=\"name\" placeholder=\"shadcn\" />\n                <FieldDescription>\n                  Your name may appear around GitHub where you contribute or are\n                  mentioned. You can remove it at any time.\n                </FieldDescription>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"email\">Public Email</FieldLabel>\n                <NativeSelect id=\"email\">\n                  <NativeSelectOption value=\"m@shadcn.com\">\n                    m@shadcn.com\n                  </NativeSelectOption>\n                  <NativeSelectOption value=\"m@gmail.com\">\n                    m@gmail.com\n                  </NativeSelectOption>\n                </NativeSelect>\n                <FieldDescription>\n                  You can manage verified email addresses in your{\" \"}\n                  <a href=\"#email-settings\">email settings</a>.\n                </FieldDescription>\n              </Field>\n              <Field>\n                <FieldLabel htmlFor=\"bio\">Bio</FieldLabel>\n                <Textarea\n                  id=\"bio\"\n                  placeholder=\"Tell us a little bit about yourself\"\n                />\n                <FieldDescription>\n                  You can <span>@mention</span> other users and organizations to\n                  link to them.\n                </FieldDescription>\n              </Field>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button form=\"profile\">Save Profile</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\nfunction ContributionsActivity() {\n  return (\n    <Example title=\"Contributions Activity\" className=\"justify-center\">\n      <Card className=\"mx-auto w-full max-w-md\">\n        <CardHeader>\n          <CardTitle>Contributions & Activity</CardTitle>\n          <CardDescription>\n            Manage your contributions and activity visibility.\n          </CardDescription>\n        </CardHeader>\n        <CardContent>\n          <form id=\"contributions-activity\">\n            <FieldGroup>\n              <FieldSet>\n                <FieldLegend className=\"sr-only\">\n                  Contributions & activity\n                </FieldLegend>\n                <FieldGroup className=\"gap-3\">\n                  <Field orientation=\"horizontal\">\n                    <Checkbox id=\"private-profile\" />\n                    <FieldContent>\n                      <FieldLabel\n                        htmlFor=\"private-profile\"\n                        className=\"font-normal\"\n                      >\n                        Make profile private and hide activity\n                      </FieldLabel>\n                      <FieldDescription>\n                        Enabling this will hide your contributions and activity\n                        from your GitHub profile and from social features like\n                        followers, stars, feeds, leaderboards and releases.\n                      </FieldDescription>\n                    </FieldContent>\n                  </Field>\n                  <Field orientation=\"horizontal\">\n                    <Checkbox id=\"private-contributions\" defaultChecked />\n                    <FieldContent>\n                      <FieldLabel\n                        htmlFor=\"private-contributions\"\n                        className=\"font-normal\"\n                      >\n                        Include private contributions on my profile\n                      </FieldLabel>\n                      <FieldDescription>\n                        Your contribution graph, achievements, and activity\n                        overview will show your private contributions without\n                        revealing any repository or organization information.{\" \"}\n                        <a href=\"#read-more\">Read more</a>.\n                      </FieldDescription>\n                    </FieldContent>\n                  </Field>\n                </FieldGroup>\n              </FieldSet>\n            </FieldGroup>\n          </form>\n        </CardContent>\n        <CardFooter>\n          <Button form=\"contributions-activity\">Save Changes</Button>\n        </CardFooter>\n      </Card>\n    </Example>\n  )\n}\nconst users = [\n  \"shadcn\",\n  \"maxleiter\",\n  \"evilrabbit\",\n  \"pranathip\",\n  \"jorgezreik\",\n  \"shuding\",\n  \"rauchg\",\n]\nfunction AssignIssue() {\n  const anchor = useComboboxAnchor()\n  return (\n    <Example title=\"User Select\" className=\"items-center justify-center\">\n      <Card className=\"w-full max-w-sm\" size=\"sm\">\n        <CardHeader className=\"border-b\">\n          <CardTitle className=\"text-sm\">Assign Issue</CardTitle>\n          <CardDescription className=\"text-sm\">\n            Select users to assign to this issue.\n          </CardDescription>\n          <CardAction>\n            <Tooltip>\n              <TooltipTrigger\n                render={<Button variant=\"outline\" size=\"icon-xs\" />}\n              >\n                <IconPlaceholder\n                  lucide=\"PlusIcon\"\n                  tabler=\"IconPlus\"\n                  hugeicons=\"PlusSignIcon\"\n                  phosphor=\"PlusIcon\"\n                  remixicon=\"RiAddLine\"\n                />\n              </TooltipTrigger>\n              <TooltipContent>Add user</TooltipContent>\n            </Tooltip>\n          </CardAction>\n        </CardHeader>\n        <CardContent>\n          <Combobox\n            multiple\n            autoHighlight\n            items={users}\n            defaultValue={[users[0]]}\n          >\n            <ComboboxChips ref={anchor}>\n              <ComboboxValue>\n                {(values) => (\n                  <React.Fragment>\n                    {values.map((username: string) => (\n                      <ComboboxChip key={username}>\n                        <Avatar className=\"size-4\">\n                          <AvatarImage\n                            src={`https://github.com/${username}.png`}\n                            alt={username}\n                          />\n                          <AvatarFallback>{username.charAt(0)}</AvatarFallback>\n                        </Avatar>\n                        {username}\n                      </ComboboxChip>\n                    ))}\n                    <ComboboxChipsInput\n                      placeholder={\n                        values.length > 0 ? undefined : \"Select a item...\"\n                      }\n                    />\n                  </React.Fragment>\n                )}\n              </ComboboxValue>\n            </ComboboxChips>\n            <ComboboxContent anchor={anchor}>\n              <ComboboxEmpty>No users found.</ComboboxEmpty>\n              <ComboboxList>\n                {(username) => (\n                  <ComboboxItem key={username} value={username}>\n                    <Avatar className=\"size-5\">\n                      <AvatarImage\n                        src={`https://github.com/${username}.png`}\n                        alt={username}\n                      />\n                      <AvatarFallback>{username.charAt(0)}</AvatarFallback>\n                    </Avatar>\n                    {username}\n                  </ComboboxItem>\n                )}\n              </ComboboxList>\n            </ComboboxContent>\n          </Combobox>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n",
       "type": "registry:block"
     }
   ],