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

38 lines
1.4 KiB
TypeScript

"use client";
import type { GroupSettingsViewModelState } from "@/features/groups/components/use-group-settings-view-model";
type GroupSettingsDangerCardProps = {
vm: GroupSettingsViewModelState;
};
export default function GroupSettingsDangerCard({ vm }: GroupSettingsDangerCardProps) {
return (
<div className="panel panel-accent p-4 space-y-3">
<div className="card-header">
<div className="card-title text-red-200">Danger zone</div>
</div>
<div className="space-y-2">
{vm.showLeaveGroup ? (
<button
type="button"
className="w-full rounded-lg btn-outline-accent px-3 py-2 text-sm font-semibold"
onClick={() => vm.setConfirmLeaveOpen(true)}
>
Leave group
</button>
) : null}
<button
type="button"
className="w-full rounded-lg border border-red-400/60 bg-red-500/10 px-3 py-2 text-sm font-semibold text-red-200"
onClick={() => vm.setConfirmDeleteGroupOpen(true)}
disabled={!vm.isOwner}
>
Delete group
</button>
</div>
{!vm.isOwner ? <div className="text-xs text-soft">Only the owner can delete this group.</div> : null}
</div>
);
}