Team

An empty state inviting a team to a project.

CNLRER

No Team Members

Invite your team to collaborate on this project.

On the site it lives at /home. Open it on the canvas, where it can be sized, coloured and rearranged with the rest.

Installation

pnpm dlx shadcn@latest add @44gov/team

Or copy the source into your project and update the import paths to match it.

components/cards/team.tsx

"use client" import {  Avatar,  AvatarFallback,  AvatarGroup,  AvatarImage,} from "@govblock/ui/components/avatar"import { Button } from "@govblock/ui/components/button"import { Card, CardContent } from "@govblock/ui/components/card"import {  Empty,  EmptyContent,  EmptyDescription,  EmptyHeader,  EmptyMedia,  EmptyTitle,} from "@govblock/ui/components/empty" export function NoTeamMembers() {  return (    <Card>      <CardContent>        <Empty className="h-56 border">          <EmptyHeader>            <EmptyMedia>              <AvatarGroup className="grayscale">                <Avatar size="lg">                  <AvatarImage                    src="https://github.com/shadcn.png"                    alt="@shadcn"                  />                  <AvatarFallback>CN</AvatarFallback>                </Avatar>                <Avatar size="lg">                  <AvatarImage                    src="https://github.com/maxleiter.png"                    alt="@maxleiter"                  />                  <AvatarFallback>LR</AvatarFallback>                </Avatar>                <Avatar size="lg">                  <AvatarImage                    src="https://github.com/evilrabbit.png"                    alt="@evilrabbit"                  />                  <AvatarFallback>ER</AvatarFallback>                </Avatar>              </AvatarGroup>            </EmptyMedia>            <EmptyTitle>No Team Members</EmptyTitle>            <EmptyDescription>              Invite your team to collaborate on this project.            </EmptyDescription>          </EmptyHeader>          <EmptyContent>            <Button size="sm">Invite Members</Button>          </EmptyContent>        </Empty>      </CardContent>    </Card>  )}

Usage

import { NoTeamMembers } from "@/components/cards/team"

<NoTeamMembers />

Composition

The parts the block is built from, in the order they appear.

NoTeamMembers├── CardContent└── Empty

Data

The block reads no route of its own. What it shows comes from the page that holds it.

API Reference

NoTeamMembers takes no props. It reads the jurisdiction and year from the page.

API Chambers