New

TeamActivity

Team member list with avatar stack, status indicators, and recent actions

Dashboard & Analyticsteamactivitymembersstatus

Dependencies

shadcn/ui components needed:

npx shadcn@latest add cardnpx shadcn@latest add avatarnpx shadcn@latest add badge

How to use this component

Copy the code below into your project. Make sure you have the required shadcn/ui dependencies installed. Then import and use the component in your pages or layouts.

Code

1"use client"
2
3import * as React from "react"
4import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
5import { Avatar, AvatarFallback } from "@/components/ui/avatar"
6import { Badge } from "@/components/ui/badge"
7import { cn } from "@/lib/utils"
8
9interface TeamMember {
10  name: string
11  role: string
12  status: "online" | "offline" | "away"
13  lastAction: string
14  time: string
15}
16
17interface TeamActivityProps {
18  members?: TeamMember[]
19  className?: string
20}
21
22const statusColors = {
23  online: "bg-emerald-500",
24  offline: "bg-slate-400",
25  away: "bg-amber-500",
26}
27
28export function TeamActivity({ members = [
29  { name: "Sarah Chen", role: "Product Designer", status: "online", lastAction: "Updated designs", time: "2m" },
30  { name: "Alex Rivera", role: "Frontend Dev", status: "online", lastAction: "Pushed commit", time: "15m" },
31  { name: "Jordan Lee", role: "Backend Dev", status: "away", lastAction: "In meeting", time: "1h" },
32  { name: "Morgan Smith", role: "Data Analyst", status: "offline", lastAction: "Report sent", time: "3h" },
33  { name: "Taylor Kim", role: "Product Manager", status: "online", lastAction: "Created ticket", time: "5m" },
34], className }: TeamActivityProps) {
35  return (
36    <Card className={cn("w-full", className)}>
37      <CardHeader>
38        <CardTitle>Team Activity</CardTitle>
39        <div className="flex -space-x-2 mt-2">
40          {members.map((member, i) => (
41            <Avatar key={i} className="w-8 h-8 border-2 border-background">
42              <AvatarFallback className="text-xs bg-primary/10 text-primary">
43                {member.name.split(" ").map(n => n[0]).join("")}
44              </AvatarFallback>
45            </Avatar>
46          ))}
47        </div>
48      </CardHeader>
49      <CardContent>
50        <div className="space-y-3">
51          {members.map((member, i) => (
52            <div key={i} className="flex items-center gap-3 p-2 rounded-lg hover:bg-muted/50 transition-colors">
53              <div className="relative">
54                <Avatar className="w-10 h-10">
55                  <AvatarFallback className="text-sm bg-primary/10 text-primary">
56                    {member.name.split(" ").map(n => n[0]).join("")}
57                  </AvatarFallback>
58                </Avatar>
59                <div className={cn("absolute -bottom-0.5 -right-0.5 w-3 h-3 rounded-full border-2 border-background", statusColors[member.status])} />
60              </div>
61              <div className="flex-1 min-w-0">
62                <p className="font-medium text-sm truncate">{member.name}</p>
63                <p className="text-xs text-muted-foreground">{member.role}</p>
64              </div>
65              <div className="text-right min-w-0">
66                <p className="text-xs text-muted-foreground truncate">{member.lastAction}</p>
67                <Badge variant="outline" className="text-xs mt-1">{member.time}</Badge>
68              </div>
69            </div>
70          ))}
71        </div>
72      </CardContent>
73    </Card>
74  )
75}