CardsShare() — ui Function Reference

Architecture documentation for the CardsShare() function in share.tsx from the ui codebase.

Function tsx Internationalization Dictionary

Entity Profile

Internationalization→ Dictionary→ CardsShare() — ui Function Reference

Dependency Diagram

graph TD
  227443db_0936_3db0_5bb3_44df326afb1a["CardsShare()"]
  b24c8784_f163_eea2_d95e_83c845f753ff["share.tsx"]
  227443db_0936_3db0_5bb3_44df326afb1a -->|defined in| b24c8784_f163_eea2_d95e_83c845f753ff
  style 227443db_0936_3db0_5bb3_44df326afb1a fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/components/cards/share.tsx lines 57–117

export function CardsShare() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Share this document</CardTitle>
        <CardDescription>
          Anyone with the link can view this document.
        </CardDescription>
      </CardHeader>
      <CardContent>
        <div className="flex items-center gap-2">
          <Label htmlFor="link" className="sr-only">
            Link
          </Label>
          <Input
            id="link"
            value="http://example.com/link/to/document"
            className="h-8"
            readOnly
          />
          <Button size="sm" variant="outline" className="shadow-none">
            Copy Link
          </Button>
        </div>
        <Separator className="my-4" />
        <div className="flex flex-col gap-4">
          <div className="text-sm font-medium">People with access</div>
          <ItemGroup>
            {people.map((person) => (
              <Item key={person.email} className="px-0 py-2">
                <Avatar>
                  <AvatarImage src={person.avatar} alt="Image" />
                  <AvatarFallback>{person.name.charAt(0)}</AvatarFallback>
                </Avatar>
                <ItemContent>
                  <ItemTitle>{person.name}</ItemTitle>
                  <ItemDescription>{person.email}</ItemDescription>
                </ItemContent>
                <ItemActions>
                  <Select defaultValue="edit">
                    <SelectTrigger
                      className="ml-auto pr-2"
                      aria-label="Edit"
                      size="sm"
                    >
                      <SelectValue placeholder="Select" />
                    </SelectTrigger>
                    <SelectContent align="end">
                      <SelectItem value="edit">Can edit</SelectItem>
                      <SelectItem value="view">Can view</SelectItem>
                    </SelectContent>
                  </Select>
                </ItemActions>
              </Item>
            ))}
          </ItemGroup>
        </div>
      </CardContent>
    </Card>
  )
}