Loading...
Loading...
> Team member profile card component with avatar, status indicator, actions, and optional compact layout.
1import { MemberCard, Member } from "@/components/ui/member-card";
Senior Developer
Full-stack engineer with 8 years of experience building scalable web applications.
Member since Jan 2023
1const member: Member = {2 id: "1",3 name: "Alex Chen",4 email: "alex@example.com",5 role: "Senior Developer",6 bio: "Full-stack engineer with 8 years of experience.",7 status: "online",8 skills: ["React", "TypeScript", "Node.js"],9};1011<MemberCard12 member={member}13 onEmail={(member) => console.log(member.email)}14 onMessage={(member) => console.log(member.name)}15/>
Product Manager
UX Designer
Backend Engineer
1<MemberCard2 member={member}3 variant="compact"4 onEmail={(member) => console.log(member.email)}5/>
Senior Developer
Full-stack engineer with 8 years of experience building scalable web applications.
Member since Jan 2023
1<MemberCard2 member={member}3 onEdit={(member) => console.log("Edit:", member.name)}4 onViewProfile={(member) => console.log("View:", member.name)}5 onRemove={(member) => console.log("Remove:", member.name)}6/>
Senior Developer
Senior Developer
Senior Developer
1<MemberCard member={{ ...member, status: "online" }} variant="compact" />2<MemberCard member={{ ...member, status: "away" }} variant="compact" />3<MemberCard member={{ ...member, status: "offline" }} variant="compact" />
Senior Developer
Full-stack engineer with 8 years of experience building scalable web applications.
Member since Jan 2023
1<MemberCard2 member={{3 ...member,4 skills: ["React", "TypeScript", "Node.js", "GraphQL"],5 }}6/>
Product Manager
Member since Jun 2022
UX Designer
Member since Mar 2023
Backend Engineer
Member since Aug 2023
1<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">2 {members.map((member) => (3 <MemberCard key={member.id} member={member} />4 ))}5</div>
| Prop | Type | Default | Description |
|---|---|---|---|
| member* | Member | - | Member object with id, name, email, role, and optional fields |
| variant | "card" | "compact" | "card" | Layout variant: full card or compact horizontal |
| showActions | boolean | true | Show action buttons/menu |
| onEmail | (member: Member) => void | - | Callback when email button is clicked |
| onMessage | (member: Member) => void | - | Callback when message button is clicked |
| onEdit | (member: Member) => void | - | Callback when edit action is selected |
| onRemove | (member: Member) => void | - | Callback when remove action is selected |
| onViewProfile | (member: Member) => void | - | Callback when view profile action is selected |
| className | string | - | Additional CSS classes for the card |