CardsTeamMembers() — ui Function Reference

Architecture documentation for the CardsTeamMembers() function in team-members.tsx from the ui codebase.

Function tsx Internationalization Dictionary

Entity Profile

Internationalization→ Dictionary→ CardsTeamMembers() — ui Function Reference

Dependency Diagram

graph TD
  e63cf734_34c1_fcd8_8715_b92b40cde09f["CardsTeamMembers()"]
  403f1bb5_aa25_5fa5_111d_2b315ac175e2["team-members.tsx"]
  e63cf734_34c1_fcd8_8715_b92b40cde09f -->|defined in| 403f1bb5_aa25_5fa5_111d_2b315ac175e2
  style e63cf734_34c1_fcd8_8715_b92b40cde09f fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/components/cards/team-members.tsx lines 79–137

export function CardsTeamMembers() {
  return (
    <Card className="gap-4">
      <CardHeader>
        <CardTitle>Team Members</CardTitle>
        <CardDescription>
          Invite your team members to collaborate.
        </CardDescription>
      </CardHeader>
      <CardContent>
        {teamMembers.map((member) => (
          <Item key={member.name} size="sm" className="gap-4 px-0">
            <Avatar className="shrink-0 self-start border">
              <AvatarImage src={member.avatar} alt="Image" />
              <AvatarFallback>{member.name.charAt(0)}</AvatarFallback>
            </Avatar>
            <ItemContent>
              <ItemTitle>{member.name}</ItemTitle>
              <ItemDescription>{member.email}</ItemDescription>
            </ItemContent>
            <ItemActions>
              <Popover>
                <PopoverTrigger asChild>
                  <Button
                    variant="outline"
                    size="sm"
                    className="ml-auto shadow-none"
                  >
                    {member.role} <ChevronDown />
                  </Button>
                </PopoverTrigger>
                <PopoverContent className="p-0" align="end">
                  <Command>
                    <CommandInput placeholder="Select role..." />
                    <CommandList>
                      <CommandEmpty>No roles found.</CommandEmpty>
                      <CommandGroup>
                        {roles.map((role) => (
                          <CommandItem key={role.name}>
                            <div className="flex flex-col">
                              <p className="text-sm font-medium">{role.name}</p>
                              <p className="text-muted-foreground">
                                {role.description}
                              </p>
                            </div>
                          </CommandItem>
                        ))}
                      </CommandGroup>
                    </CommandList>
                  </Command>
                </PopoverContent>
              </Popover>
            </ItemActions>
          </Item>
        ))}
      </CardContent>
    </Card>
  )
}