import { type BreadcrumbItem } from '@/types'; import { Head, router } from '@inertiajs/react'; import { Check, Clock, XCircle } from 'lucide-react'; import { ConfirmDialog } from '@/components/confirm-dialog'; import Heading from '@/components/heading'; import HeadingSmall from '@/components/heading-small'; import { Badge } from '@/components/ui/badge'; import { Button } from '@/components/ui/button'; import { useTranslation } from '@/hooks/use-translation'; import AppLayout from '@/layouts/app-layout'; interface GroupCard { id: number; name: string; description: string | null; requested?: boolean; denied?: boolean; } interface MyGroupsProps { memberships: GroupCard[]; available: GroupCard[]; } export default function MyGroups({ memberships, available }: MyGroupsProps) { const { t } = useTranslation(); const breadcrumbs: BreadcrumbItem[] = [{ title: t('My groups'), href: '/my-groups' }]; const requestMembership = (groupId: number) => { router.post(route('my-groups.store'), { group_id: groupId }, { preserveScroll: true }); }; return (

{memberships.length === 0 && (

{t('You are not a member of any group yet.')}

)} {memberships.map((group) => (

{group.name}

{group.description &&

{group.description}

}

{t('Member')} {t('Leave')} } title={t('Leave this group?')} description={t('You will no longer receive files shared with the group ":name".', { name: group.name })} confirmLabel={t('Leave group')} onConfirm={() => router.delete(route('my-groups.leave', group.id), { preserveScroll: true })} />

))}

{available.length > 0 && (

{available.map((group) => (

{group.name}

{group.description &&

{group.description}

}

{group.requested ? ( {t('Requested')} ) : group.denied ? ( {t('Request declined')} ) : ( )}

))}

)}

); }