'use client'; import Modal, { ModalHeader, ModalTitle, ModalContent, ModalFooter, ModalClose } from '@/src/components/Modal/Modal'; import { Card, CardContent, CardHeader } from '@/src/components/Card/Card'; import { Select } from '@/src/components/Select/Select'; import Badge from '@/src/components/Badge/Badge'; import Avatar from '@/src/components/Avatar/Avatar'; import Button from '@/src/components/Button/Button'; import Input from '@/src/components/Input/Input'; import { useState } from 'react'; const ROLE_OPTIONS = [ { value: 'Admin', label: 'Admin' }, { value: 'Member', label: 'Member' }, { value: 'Viewer', label: 'Viewer' }, ]; const ROLE_BADGE_VARIANT = { Admin: 'default', Member: 'success', Viewer: 'outline' }; const INITIAL_MEMBERS = [ { id: 1, name: 'Ava Thompson', email: 'ava.thompson@company.com', role: 'Admin' }, { id: 2, name: 'Noah Martinez', email: 'noah.martinez@company.com', role: 'Member' }, { id: 3, name: 'Priya Sharma', email: 'priya.sharma@company.com', role: 'Member' }, { id: 4, name: 'Liam Chen', email: 'liam.chen@company.com', role: 'Viewer' }, { id: 5, name: 'Sofia Rossi', email: 'sofia.rossi@company.com', role: 'Viewer' }, ]; export default function TeamManagement() { const [members, setMembers] = useState(INITIAL_MEMBERS); const [inviteOpen, setInviteOpen] = useState(false); const [inviteEmail, setInviteEmail] = useState(''); const [inviteRole, setInviteRole] = useState('Member'); const [memberPendingRemoval, setMemberPendingRemoval] = useState(null); const handleInviteOpenChange = (open) => { setInviteOpen(open); if (!open) { setInviteEmail(''); setInviteRole('Member'); } }; const handleSendInvite = () => { if (!inviteEmail.trim()) return; setMembers((prev) => [...prev, { id: Date.now(), name: inviteEmail.split('@')[0], email: inviteEmail, role: inviteRole }]); handleInviteOpenChange(false); }; const handleConfirmRemove = () => { if (!memberPendingRemoval) return; setMembers((prev) => prev.filter((m) => m.id !== memberPendingRemoval.id)); setMemberPendingRemoval(null); }; return (

Team members

Manage who has access to this workspace.

{members.map((member) => (

{member.name}

{member.email}

{member.role}

))}

Invite member setInviteEmail(e.target.value)} />

Team management

Installation

Demo

Team members