RepositoryToolbar() — ui Function Reference

Architecture documentation for the RepositoryToolbar() function in github.tsx from the ui codebase.

Function tsx ComponentRegistry UIPrimitives

Entity Profile

ComponentRegistry→ UIPrimitives→ RepositoryToolbar() — ui Function Reference

Dependency Diagram

graph TD
  aa919869_08fd_c57e_f261_c5c6fb594486["RepositoryToolbar()"]
  ea47a897_f8a1_c141_0a31_7faa4e84543e["github.tsx"]
  aa919869_08fd_c57e_f261_c5c6fb594486 -->|defined in| ea47a897_f8a1_c141_0a31_7faa4e84543e
  style aa919869_08fd_c57e_f261_c5c6fb594486 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/registry/bases/base/blocks/github.tsx lines 485–719

function RepositoryToolbar() {
  const [selectedBranch, setSelectedBranch] = React.useState("main")
  return (
    <Example title="Repository Toolbar">
      <div className="flex items-center gap-2">
        <InputGroup>
          <InputGroupInput placeholder="Go to file" />
          <InputGroupAddon align="inline-start">
            <InputGroupButton variant="ghost" size="icon-xs">
              <IconPlaceholder
                lucide="SearchIcon"
                tabler="IconSearch"
                hugeicons="SearchIcon"
                phosphor="MagnifyingGlassIcon"
                remixicon="RiSearchLine"
              />
            </InputGroupButton>
          </InputGroupAddon>
          <InputGroupAddon align="inline-end">
            <Kbd>t</Kbd>
          </InputGroupAddon>
        </InputGroup>
        <DropdownMenu>
          <DropdownMenuTrigger render={<Button variant="outline" />}>
            Add File
            <IconPlaceholder
              lucide="ChevronDownIcon"
              tabler="IconChevronDown"
              hugeicons="ArrowDown01Icon"
              phosphor="CaretDownIcon"
              remixicon="RiArrowDownSLine"
              data-icon="inline-end"
            />
          </DropdownMenuTrigger>
          <DropdownMenuContent align="end">
            <DropdownMenuGroup>
              <DropdownMenuItem>
                <IconPlaceholder
                  lucide="PlusIcon"
                  tabler="IconPlus"
                  hugeicons="PlusSignIcon"
                  phosphor="PlusIcon"
                  remixicon="RiAddLine"
                />
                Create new file
              </DropdownMenuItem>
              <DropdownMenuItem>
                <IconPlaceholder
                  lucide="UploadIcon"
                  hugeicons="Upload01Icon"
                  tabler="IconUpload"
                  phosphor="UploadIcon"
                  remixicon="RiUploadLine"
                />
                Upload files
              </DropdownMenuItem>
            </DropdownMenuGroup>
          </DropdownMenuContent>
        </DropdownMenu>
        <Popover>
          <Tooltip>
            <TooltipTrigger
              render={
                <PopoverTrigger
                  render={<Button variant="outline" size="icon" />}
                />
              }
            >
              <IconPlaceholder
                lucide="CloudCogIcon"
                hugeicons="AiCloud01Icon"
                tabler="IconCloudCog"
                phosphor="CloudArrowUpIcon"
                remixicon="RiUploadCloudLine"
              />
            </TooltipTrigger>
            <TooltipContent>New Agent Task</TooltipContent>
          </Tooltip>
          <PopoverContent side="bottom" align="end" className="w-96">
            <Field>
              <FieldLabel htmlFor="new-agent-task">New Agent Task</FieldLabel>