AssignIssue() — ui Function Reference

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

Function tsx ComponentRegistry ChartRegistry

Entity Profile

ComponentRegistry→ ChartRegistry→ AssignIssue() — ui Function Reference

Dependency Diagram

graph TD
  653d5d1c_06c7_e5c7_a8e0_cf402a925af8["AssignIssue()"]
  37b4caef_d1dd_c771_008d_90d0735aa244["github.tsx"]
  653d5d1c_06c7_e5c7_a8e0_cf402a925af8 -->|defined in| 37b4caef_d1dd_c771_008d_90d0735aa244
  style 653d5d1c_06c7_e5c7_a8e0_cf402a925af8 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/registry/bases/radix/blocks/github.tsx lines 1314–1396

function AssignIssue() {
  const anchor = useComboboxAnchor()

  return (
    <Example title="User Select" className="items-center justify-center">
      <Card className="w-full max-w-sm" size="sm">
        <CardHeader className="border-b">
          <CardTitle className="text-sm">Assign Issue</CardTitle>
          <CardDescription className="text-sm">
            Select users to assign to this issue.
          </CardDescription>
          <CardAction>
            <Tooltip>
              <TooltipTrigger asChild>
                <Button variant="outline" size="icon-xs">
                  <IconPlaceholder
                    lucide="PlusIcon"
                    tabler="IconPlus"
                    hugeicons="PlusSignIcon"
                    phosphor="PlusIcon"
                    remixicon="RiAddLine"
                  />
                </Button>
              </TooltipTrigger>
              <TooltipContent>Add user</TooltipContent>
            </Tooltip>
          </CardAction>
        </CardHeader>
        <CardContent>
          <Combobox
            multiple
            autoHighlight
            items={users}
            defaultValue={[users[0]]}
          >
            <ComboboxChips ref={anchor}>
              <ComboboxValue>
                {(values) => (
                  <React.Fragment>
                    {values.map((username: string) => (
                      <ComboboxChip key={username}>
                        <Avatar className="size-4">
                          <AvatarImage
                            src={`https://github.com/${username}.png`}
                            alt={username}
                          />
                          <AvatarFallback>{username.charAt(0)}</AvatarFallback>
                        </Avatar>
                        {username}
                      </ComboboxChip>
                    ))}
                    <ComboboxChipsInput
                      placeholder={
                        values.length > 0 ? undefined : "Select a item..."
                      }
                    />
                  </React.Fragment>
                )}
              </ComboboxValue>
            </ComboboxChips>
            <ComboboxContent anchor={anchor}>
              <ComboboxEmpty>No users found.</ComboboxEmpty>
              <ComboboxList>
                {(username) => (
                  <ComboboxItem key={username} value={username}>
                    <Avatar className="size-5">
                      <AvatarImage
                        src={`https://github.com/${username}.png`}
                        alt={username}
                      />
                      <AvatarFallback>{username.charAt(0)}</AvatarFallback>
                    </Avatar>
                    {username}
                  </ComboboxItem>
                )}
              </ComboboxList>
            </ComboboxContent>
          </Combobox>
        </CardContent>
      </Card>
    </Example>