fiddy/apps/web/features/groups/components/group-settings-content.tsx

49 lines
2.0 KiB
TypeScript

"use client";
import GroupSettingsAuditCard from "@/features/groups/components/group-settings-audit-card";
import GroupSettingsDangerCard from "@/features/groups/components/group-settings-danger-card";
import GroupSettingsGeneralCard from "@/features/groups/components/group-settings-general-card";
import GroupSettingsJoinInvitesCard from "@/features/groups/components/group-settings-join-invites-card";
import GroupSettingsMembersCard from "@/features/groups/components/group-settings-members-card";
import GroupSettingsModals from "@/features/groups/components/group-settings-modals";
import useGroupSettingsViewModel from "@/features/groups/components/use-group-settings-view-model";
export default function GroupSettingsContent({ groupId }: { groupId: number }) {
const vm = useGroupSettingsViewModel(groupId);
if (!vm.group) {
return (
<div className="panel panel-accent p-4">
<div className="text-sm text-muted">Loading group settings...</div>
</div>
);
}
return (
<>
<div className="space-y-4">
<div className="flex items-center justify-between">
<div>
<h1 className="text-2xl font-semibold">{vm.group.name} settings</h1>
<p className="text-sm text-muted">Manage tags and permissions for this group.</p>
</div>
<button
type="button"
className="rounded-lg btn-outline-accent px-3 py-1.5 text-sm"
onClick={vm.goBack}
>
Back
</button>
</div>
<GroupSettingsGeneralCard vm={vm} />
<GroupSettingsJoinInvitesCard vm={vm} />
<GroupSettingsMembersCard vm={vm} />
<GroupSettingsDangerCard vm={vm} />
<GroupSettingsAuditCard vm={vm} />
</div>
<GroupSettingsModals vm={vm} />
</>
);
}