61 lines
1.9 KiB
TypeScript
61 lines
1.9 KiB
TypeScript
import { auth } from "@/server/auth";
|
||
import { redirect } from "next/navigation";
|
||
import { createGroup } from "@/server/actions/groups";
|
||
|
||
export default async function NewGroupPage() {
|
||
const session = await auth();
|
||
if (!session?.user?.id) redirect("/login");
|
||
|
||
return (
|
||
<div className="min-h-screen bg-zinc-50 text-zinc-900">
|
||
<div className="mx-auto max-w-lg px-6 py-16">
|
||
<h1 className="text-2xl font-semibold tracking-tight">Create a group</h1>
|
||
<p className="mt-2 text-sm text-zinc-600">
|
||
Example: “Family”, “Brother’s friends”, “Cousins”.
|
||
</p>
|
||
|
||
<form
|
||
action={async (formData) => {
|
||
"use server";
|
||
await createGroup(formData);
|
||
}}
|
||
className="mt-8 space-y-4 rounded-2xl border border-zinc-200 bg-white p-6 shadow-sm"
|
||
>
|
||
<div>
|
||
<label className="block text-sm font-medium">Group name</label>
|
||
<input
|
||
name="name"
|
||
required
|
||
className="mt-2 w-full rounded-xl border border-zinc-300 px-3 py-2 outline-none focus:border-zinc-900"
|
||
placeholder="Family"
|
||
/>
|
||
</div>
|
||
|
||
<div>
|
||
<label className="block text-sm font-medium">Slug</label>
|
||
<input
|
||
name="slug"
|
||
required
|
||
pattern="^[a-z0-9-]+$"
|
||
className="mt-2 w-full rounded-xl border border-zinc-300 px-3 py-2 outline-none focus:border-zinc-900"
|
||
placeholder="family"
|
||
/>
|
||
<p className="mt-2 text-xs text-zinc-500">
|
||
Lowercase letters, numbers, and dashes only.
|
||
</p>
|
||
</div>
|
||
|
||
<button
|
||
type="submit"
|
||
className="w-full rounded-xl bg-zinc-900 px-4 py-2 text-sm font-medium text-white hover:bg-zinc-800"
|
||
>
|
||
Create group
|
||
</button>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
|