68 lines
2.3 KiB
TypeScript
68 lines
2.3 KiB
TypeScript
'use client'
|
|
// import react-hook-from
|
|
import {useForm, SubmitHandler} from "react-hook-form";
|
|
import {Input} from "@/components/ui/input";
|
|
import {Label} from "@/components/ui/label";
|
|
import {useProjectCodeMutation} from "@/queries/projectcode";
|
|
|
|
type Inputs = {
|
|
title: string
|
|
count: number
|
|
}
|
|
|
|
const Page = ()=>{
|
|
|
|
const {register, handleSubmit, control, formState: { errors },} = useForm<Inputs>();
|
|
|
|
const {mutate: createProjectCode, data:project_code, isError, isSuccess, isPending} = useProjectCodeMutation()
|
|
|
|
const onSubmit:SubmitHandler<Inputs> = (data)=>{
|
|
createProjectCode(data)
|
|
}
|
|
|
|
return (
|
|
<div className={"flex flex-row gap-2 items-center justify-center m-auto w-[35%]"}>
|
|
|
|
<form className={'w-full flex flex-col gap-y-2'} onSubmit={handleSubmit(onSubmit)}>
|
|
<Label>
|
|
عنوان
|
|
<Input className={'mt-1'} type={"text"} {...register("title", {
|
|
required: {
|
|
value: true,
|
|
message: 'عنوان ضروری است'
|
|
},
|
|
minLength: {
|
|
value: 3,
|
|
message: 'عنوان مناسب وارد کنید'
|
|
},
|
|
})}/>
|
|
</Label>
|
|
|
|
<p className={'text-red-500'}>{errors.title?.message}</p>
|
|
|
|
<Label>
|
|
تعداد
|
|
<Input className={'mt-1'} type={"text"} {...register("count", {
|
|
required: {
|
|
value: true,
|
|
message: 'تعداد ضروری است'
|
|
},
|
|
pattern: {
|
|
value: /^[0-9]+$/,
|
|
message: 'فقط عدد وارد کنید'
|
|
}
|
|
})}/>
|
|
</Label>
|
|
<p className={'text-red-500'}>{errors.count?.message}</p>
|
|
|
|
{ !isPending && !isSuccess ? (
|
|
<input value={'تولید کد'} className={'bg-gray-800 text-white text-center rounded p-1'} type="submit"/>
|
|
) : null}
|
|
|
|
</form>
|
|
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Page; |