93 lines
3.3 KiB
TypeScript
93 lines
3.3 KiB
TypeScript
import { useArk, useColumnContext } from "@lume/ark";
|
|
import { CancelIcon, CheckCircleIcon } from "@lume/icons";
|
|
import { User } from "@lume/ui";
|
|
import { useState } from "react";
|
|
|
|
export function GroupForm({ id }: { id: number }) {
|
|
const ark = useArk();
|
|
const { updateColumn, removeColumn } = useColumnContext();
|
|
|
|
const [title, setTitle] = useState<string>("Just a new group");
|
|
const [users, setUsers] = useState<Array<string>>([]);
|
|
|
|
// toggle follow state
|
|
const toggleUser = (pubkey: string) => {
|
|
const arr = users.includes(pubkey)
|
|
? users.filter((i) => i !== pubkey)
|
|
: [...users, pubkey];
|
|
setUsers(arr);
|
|
};
|
|
|
|
const submit = async () => {
|
|
await updateColumn(id, title, JSON.stringify(users));
|
|
};
|
|
|
|
return (
|
|
<div className="flex flex-col justify-between h-full">
|
|
<div className="flex flex-col flex-1 min-h-0">
|
|
<div className="flex items-center justify-between w-full px-3 border-b h-11 shrink-0 border-neutral-100 dark:border-neutral-900">
|
|
<h1 className="text-sm font-semibold">Create a new Group</h1>
|
|
<button
|
|
type="button"
|
|
onClick={async () => await removeColumn(id)}
|
|
className="inline-flex items-center justify-center rounded size-6 hover:bg-neutral-100 dark:hover:bg-neutral-900"
|
|
>
|
|
<CancelIcon className="size-4" />
|
|
</button>
|
|
</div>
|
|
<div className="flex flex-col gap-5 px-3 pt-2 overflow-y-auto">
|
|
<div className="flex flex-col gap-1.5">
|
|
<label
|
|
htmlFor="name"
|
|
className="font-medium text-neutral-700 dark:text-neutral-300"
|
|
>
|
|
Group Name
|
|
</label>
|
|
<input
|
|
name="name"
|
|
value={title}
|
|
onChange={(e) => setTitle(e.target.value)}
|
|
placeholder="Nostrichs..."
|
|
className="px-2 border border-neutral-100 dark:border-neutral-900 bg-neutral-50 rounded-lg h-10 dark:bg-neutral-950 placeholder:text-neutral-600 focus:border-blue-500 focus:shadow-none focus:ring-0"
|
|
/>
|
|
</div>
|
|
<div className="flex flex-col gap-1">
|
|
<div className="inline-flex items-center justify-between">
|
|
<span className="font-medium text-neutral-700 dark:text-neutral-300">
|
|
Pick user
|
|
</span>
|
|
<span className="text-sm font-medium text-neutral-600 dark:text-neutral-400">{`${users.length} / ∞`}</span>
|
|
</div>
|
|
<div className="flex flex-col gap-2">
|
|
{ark.account?.contacts?.map((item: string) => (
|
|
<button
|
|
key={item}
|
|
type="button"
|
|
onClick={() => toggleUser(item)}
|
|
className="inline-flex items-center justify-between px-3 py-2 rounded-xl bg-neutral-50 dark:bg-neutral-950 hover:bg-neutral-100 dark:hover:bg-neutral-900"
|
|
>
|
|
<User pubkey={item} variant="simple" />
|
|
{users.includes(item) ? (
|
|
<CheckCircleIcon className="w-5 h-5 text-teal-500" />
|
|
) : null}
|
|
</button>
|
|
))}
|
|
<div className="h-20" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="absolute z-10 flex items-center justify-center w-full bottom-3">
|
|
<button
|
|
type="button"
|
|
onClick={submit}
|
|
disabled={users.length < 1}
|
|
className="inline-flex items-center justify-center gap-2 px-6 font-medium text-white transform bg-blue-500 rounded-full active:translate-y-1 w-36 h-11 hover:bg-blue-600 focus:outline-none disabled:cursor-not-allowed"
|
|
>
|
|
Create
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|