102 lines
5.0 KiB
TypeScript
102 lines
5.0 KiB
TypeScript
"use client";
|
|
|
|
import type { GroupSettingsViewModelState } from "@/features/groups/components/use-group-settings-view-model";
|
|
|
|
type GroupSettingsGeneralCardProps = {
|
|
vm: GroupSettingsViewModelState;
|
|
};
|
|
|
|
export default function GroupSettingsGeneralCard({ vm }: GroupSettingsGeneralCardProps) {
|
|
if (!vm.group) return null;
|
|
|
|
return (
|
|
<div className="panel panel-accent p-4 space-y-4">
|
|
<div className="card-header">
|
|
<div className="card-title">General Settings</div>
|
|
</div>
|
|
<div className="space-y-4">
|
|
<div className="flex flex-wrap items-center justify-between gap-3">
|
|
<div>
|
|
<div className="text-xs text-soft">Group name</div>
|
|
<div className="text-base font-semibold">{vm.group.name}</div>
|
|
</div>
|
|
{vm.isAdmin ? (
|
|
<button
|
|
type="button"
|
|
className="rounded-lg btn-outline-accent px-3 py-2 text-sm font-semibold"
|
|
onClick={vm.handleOpenRenameModal}
|
|
>
|
|
Change
|
|
</button>
|
|
) : null}
|
|
</div>
|
|
{!vm.isAdmin ? (
|
|
<div className="text-xs text-soft">Only admins can rename the group.</div>
|
|
) : null}
|
|
<div className="divider" />
|
|
{vm.isAdmin ? (
|
|
<>
|
|
<div className="flex flex-wrap items-center justify-between gap-3">
|
|
<div className="text-sm font-semibold">Allow members to manage tags</div>
|
|
<button
|
|
type="button"
|
|
aria-pressed={vm.localAllowMemberTagManage}
|
|
className={`relative h-7 w-12 rounded-full border transition ${vm.localAllowMemberTagManage ? "border-emerald-400 bg-emerald-500/20" : "border-red-400/60 bg-red-500/10"}`}
|
|
onClick={() => vm.handleToggleAllowMembers(!vm.localAllowMemberTagManage)}
|
|
>
|
|
<span
|
|
className={`absolute left-0.5 top-1/2 h-5 w-5 -translate-y-1/2 rounded-full transition ${vm.localAllowMemberTagManage ? "translate-x-[22px] bg-emerald-200" : "translate-x-0 bg-red-200"}`}
|
|
/>
|
|
</button>
|
|
</div>
|
|
<div className="divider" />
|
|
</>
|
|
) : null}
|
|
<div className="flex flex-wrap items-center justify-between gap-2">
|
|
<div className="text-sm font-semibold">Group Tags ({vm.tags.length})</div>
|
|
<div className="flex items-center gap-2">
|
|
{vm.showAllTags ? (
|
|
<button
|
|
type="button"
|
|
className="rounded-lg btn-outline-accent px-2 py-1 text-xs"
|
|
onClick={() => vm.setShowAllTags(false)}
|
|
>
|
|
Show less
|
|
</button>
|
|
) : null}
|
|
{vm.canManageTags ? (
|
|
<button
|
|
type="button"
|
|
className="rounded-lg btn-accent px-2 py-1 text-xs font-semibold"
|
|
onClick={() => vm.setTagModalOpen(true)}
|
|
>
|
|
Edit tags
|
|
</button>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
<div className={vm.tagsScrollable ? "max-h-60 overflow-auto resize-y pr-1" : ""}>
|
|
<div className="flex flex-wrap gap-2">
|
|
{vm.visibleTags.map(tag => (
|
|
<span key={tag} className="rounded-full border border-accent-weak bg-accent-soft px-2 py-0.5 text-xs text-[color:var(--color-text)]">
|
|
#{tag}
|
|
</span>
|
|
))}
|
|
{!vm.showAllTags && vm.hasMoreTags ? (
|
|
<button
|
|
type="button"
|
|
className="rounded-full border border-accent-weak bg-panel px-2 py-0.5 text-xs text-soft"
|
|
onClick={() => vm.setShowAllTags(true)}
|
|
aria-label="Show all tags"
|
|
>
|
|
more . . .
|
|
</button>
|
|
) : null}
|
|
{!vm.tags.length ? <div className="text-xs text-soft">No tags yet.</div> : null}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|