CodespacesCard() — ui Function Reference

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

Function tsx ComponentRegistry UIPrimitives

Entity Profile

ComponentRegistry→ UIPrimitives→ CodespacesCard() — ui Function Reference

Dependency Diagram

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

Relationship Graph

Source Code

apps/v4/registry/bases/base/blocks/github.tsx lines 137–484

function CodespacesCard() {
  const [isCreatingCodespace, setIsCreatingCodespace] = React.useState(false)
  return (
    <Example title="Codespaces" className="min-h-[550px] lg:p-12">
      <Card className="mx-auto w-full max-w-sm" size="sm">
        <CardContent>
          <Tabs defaultValue="codespaces">
            <TabsList className="w-full">
              <TabsTrigger value="codespaces">Codespaces</TabsTrigger>
              <TabsTrigger value="local">Local</TabsTrigger>
            </TabsList>
            <TabsContent value="codespaces">
              <Item size="sm" className="px-1 pt-2">
                <ItemContent>
                  <ItemTitle>Codespaces</ItemTitle>
                  <ItemDescription>
                    Your workspaces in the cloud
                  </ItemDescription>
                </ItemContent>
                <ItemActions>
                  <Tooltip>
                    <TooltipTrigger
                      render={<Button variant="ghost" size="icon-sm" />}
                    >
                      <IconPlaceholder
                        lucide="PlusIcon"
                        tabler="IconPlus"
                        hugeicons="PlusSignIcon"
                        phosphor="PlusIcon"
                        remixicon="RiAddLine"
                      />
                    </TooltipTrigger>
                    <TooltipContent side="bottom">
                      Create a codespace on main
                    </TooltipContent>
                  </Tooltip>
                  <DropdownMenu>
                    <Tooltip>
                      <TooltipTrigger
                        render={
                          <DropdownMenuTrigger
                            render={<Button variant="ghost" size="icon-sm" />}
                          />
                        }
                      >
                        <IconPlaceholder
                          lucide="MoreHorizontalIcon"
                          tabler="IconDots"
                          hugeicons="MoreHorizontalCircle01Icon"
                          phosphor="DotsThreeOutlineIcon"
                          remixicon="RiMoreLine"
                        />
                      </TooltipTrigger>
                      <TooltipContent side="bottom">
                        Codespace repository configuration
                      </TooltipContent>
                    </Tooltip>
                    <DropdownMenuContent align="end" className="w-56">
                      <DropdownMenuGroup>
                        <DropdownMenuItem>
                          <IconPlaceholder
                            lucide="PlusIcon"
                            tabler="IconPlus"
                            hugeicons="PlusSignIcon"
                            phosphor="PlusIcon"
                            remixicon="RiAddLine"
                          />
                          New with options...
                        </DropdownMenuItem>
                        <DropdownMenuItem>
                          <IconPlaceholder
                            lucide="ContainerIcon"
                            tabler="IconBox"
                            hugeicons="CubeIcon"
                            phosphor="CubeIcon"
                            remixicon="RiBox1Line"
                          />
                          Configure dev container
                        </DropdownMenuItem>
                        <DropdownMenuItem>
                          <IconPlaceholder