"use client" import { useState } from "react" import { motion, AnimatePresence } from "framer-motion" import { Users, Plus, Trash2, Send, Shield, UserCog, User } from "lucide-react" import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Input } from "@/components/ui/input" import { Separator } from "@/components/ui/separator" import { Avatar, AvatarFallback } from "@/components/ui/avatar" import { Select, SelectTrigger, SelectValue, SelectContent, SelectItem } from "@/components/ui/select" import { DotPattern } from "@/components/backgrounds/dot-pattern" import { stagger, staggerItem } from "@/lib/animations" const initialMembers = [ { id: 1, name: "Alex Lee", email: "alex@company.com", role: "Admin", status: "Active", initials: "AL" }, { id: 2, name: "Sarah Chen", email: "sarah@company.com", role: "Editor", status: "Active", initials: "SC" }, { id: 3, name: "Mike Johnson", email: "mike@company.com", role: "Viewer", status: "Active", initials: "MJ" }, { id: 4, name: "Emily Davis", email: "emily@company.com", role: "Editor", status: "Pending", initials: "ED" }, { id: 5, name: "James Wilson", email: "james@company.com", role: "Viewer", status: "Invited", initials: "JW" }, ] const roleIcons: Record = { Admin: Shield, Editor: UserCog, Viewer: User, } export default function TeamMembers() { const [members, setMembers] = useState(initialMembers) const [showInvite, setShowInvite] = useState(false) const removeMember = (id: number) => { setMembers((prev) => prev.filter((m) => m.id !== id)) } return (

Team Members

Manage your team and their roles.

{showInvite && ( Invite Team Member Send an invitation to join your team.

Role

)} {members.map((member) => { const RoleIcon = roleIcons[member.role] || User return ( {member.initials}

{member.name}

{member.status === "Pending" && Pending} {member.status === "Invited" && Invited}

{member.email}

{member.role}

{member.status !== "Active" && ( )}

) })}

) }