117 lines
3.6 KiB
TypeScript
117 lines
3.6 KiB
TypeScript
'use client';
|
|
|
|
import ProfileLayout from '@/layout/ProfileLayout';
|
|
import { Input } from '@/components/ui/input';
|
|
import { useState } from 'react';
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from '@/components/ui/select';
|
|
import { Button } from '@/components/ui/button';
|
|
import { useRouter } from 'next/navigation';
|
|
import z from 'zod';
|
|
import { useForm } from 'react-hook-form';
|
|
import { zodResolver } from '@hookform/resolvers/zod';
|
|
import { useAsyncFn } from '@/hooks/tools';
|
|
import {
|
|
Form,
|
|
FormControl,
|
|
FormField,
|
|
FormItem,
|
|
FormLabel,
|
|
FormMessage,
|
|
} from '@/components/ui/form';
|
|
|
|
export default function CreateGroupPage() {
|
|
const router = useRouter();
|
|
|
|
const schema = z.object({
|
|
nickname: z
|
|
.string()
|
|
.trim()
|
|
.min(1, 'Group nickname is required')
|
|
.min(2, 'Group nickname must be at least 2 characters'),
|
|
worldGuide: z.string().trim().min(1, 'World guide is required'),
|
|
});
|
|
|
|
const form = useForm<any>({
|
|
resolver: zodResolver(schema),
|
|
defaultValues: {},
|
|
mode: 'onChange',
|
|
});
|
|
|
|
const {
|
|
formState: { isValid, isDirty },
|
|
} = form;
|
|
|
|
const { run: onSubmitFn, loading } = useAsyncFn(async (data: any) => {
|
|
console.log('data', data);
|
|
});
|
|
|
|
return (
|
|
<ProfileLayout title="Create a Group Chat">
|
|
<Form {...form}>
|
|
<form className="h-full flex flex-col w-full" onSubmit={form.handleSubmit(onSubmitFn)}>
|
|
<div className="flex-1 overflow-auto flex flex-col gap-4">
|
|
{/* 昵称字段 */}
|
|
<FormField
|
|
control={form.control}
|
|
name="nickname"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel className="txt-label-m text-txt-primary-normal">
|
|
Group Nickname
|
|
</FormLabel>
|
|
<FormControl>
|
|
<Input
|
|
placeholder="Enter group name"
|
|
maxLength={20}
|
|
showCount
|
|
error={!!form.formState.errors.nickname}
|
|
{...field}
|
|
/>
|
|
</FormControl>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
<FormField
|
|
control={form.control}
|
|
name="worldGuide"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<FormLabel className="txt-label-m text-txt-primary-normal">World Guide</FormLabel>
|
|
<FormControl>
|
|
<Select value={field.value} onValueChange={field.onChange}>
|
|
<SelectTrigger className="w-full">
|
|
<SelectValue placeholder="Select a world guide" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="1">World Guide 1</SelectItem>
|
|
<SelectItem value="2">World Guide 2</SelectItem>
|
|
<SelectItem value="3">World Guide 3</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</FormControl>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
</div>
|
|
<div className="flex shrink-0 py-4 justify-end gap-2">
|
|
<Button onClick={() => router.back()} variant="tertiary">
|
|
Cancel
|
|
</Button>
|
|
<Button type="submit" disabled={!isValid || !isDirty} loading={loading}>
|
|
Save
|
|
</Button>
|
|
</div>
|
|
</form>
|
|
</Form>
|
|
</ProfileLayout>
|
|
);
|
|
}
|