import { Head, Link } from '@inertiajs/react'; import { Eye, LogOut, Pencil, Plus } from 'lucide-react'; import { useState } from 'react'; import CreateTeamModal from '@/components/create-team-modal'; import Heading from '@/components/heading'; import LeaveTeamModal from '@/components/leave-team-modal'; import { Badge } from '@/components/ui/badge'; import { Button } from '@/components/ui/button'; import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from '@/components/ui/tooltip'; import { edit, index } from '@/routes/teams'; import type { Team } from '@/types'; type Props = { teams: Team[]; }; export default function TeamsIndex({ teams }: Props) { const [leaveTeamDialogOpen, setLeaveTeamDialogOpen] = useState(false); const [teamLeaving, setTeamLeaving] = useState(null); const openLeaveTeamDialog = (team: Team) => { setTeamLeaving(team); setLeaveTeamDialogOpen(true); }; return ( <>

Teams

{teams.map((team) => { const canLeaveTeam = !team.isPersonal && team.role !== 'owner'; return (
{team.name} {team.isPersonal ? ( Personal ) : null}
{team.roleLabel}
{canLeaveTeam ? (

Leave team

 ) : null} {team.role === 'member' ? (

View team

 ) : (

Edit team

 )}
); })} {teams.length === 0 ? (

You don't belong to any teams yet.

) : null}
); } TeamsIndex.layout = { breadcrumbs: [ { title: 'Teams', href: index(), }, ], };