173 lines
4.3 KiB
TypeScript
173 lines
4.3 KiB
TypeScript
'use client'
|
|
|
|
import { z } from 'zod'
|
|
import { zodResolver } from '@hookform/resolvers/zod'
|
|
import { useForm } from 'react-hook-form'
|
|
|
|
import {
|
|
Form,
|
|
FormControl,
|
|
FormField,
|
|
FormItem,
|
|
FormLabel,
|
|
FormMessage,
|
|
} from '@/components/ui/form'
|
|
import { Button } from '@/components/ui/button'
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from '@/components/ui/card'
|
|
import { Input } from '@/components/ui/input'
|
|
|
|
const formSchema = z.object({
|
|
firstname: z
|
|
.string()
|
|
.min(2, { message: 'Prénom trop court' }),
|
|
lastname: z
|
|
.string()
|
|
.min(2, { message: 'Nom trop court' }),
|
|
phone: z
|
|
.string()
|
|
.min(10, { message: 'Un numéro de téléphone à 10 chiffres' }),
|
|
email: z.string().email({ message: 'Invalid email address' }),
|
|
message: z
|
|
.string()
|
|
.min(10, { message: 'Message must be at least 10 characters long' }),
|
|
})
|
|
|
|
export default function ContactFormPreview() {
|
|
const form = useForm<z.infer<typeof formSchema>>({
|
|
resolver: zodResolver(formSchema),
|
|
defaultValues: {
|
|
firstname: '',
|
|
lastname: '',
|
|
phone: '',
|
|
email: '',
|
|
},
|
|
})
|
|
|
|
async function onSubmit(values: z.infer<typeof formSchema>) {
|
|
try {
|
|
console.log(values);
|
|
await fetch("/api/users/new", {
|
|
method: "POST",
|
|
body: JSON.stringify(values),
|
|
});
|
|
} catch (error) {
|
|
console.error("Form submission error", error);
|
|
}
|
|
console.log("subimted")
|
|
}
|
|
|
|
return (
|
|
<div className="flex min-h-[60vh] h-full w-full items-center justify-center px-4">
|
|
<Card className="mx-auto max-w-md">
|
|
<CardHeader>
|
|
<CardTitle className="text-2xl">Contact Us</CardTitle>
|
|
<CardDescription>
|
|
Please fill out the form below and we will get back to you shortly.
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<Form {...form}>
|
|
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
|
|
<div className="grid gap-4">
|
|
{/* Firstname Field */}
|
|
<FormField
|
|
control={form.control}
|
|
name="firstname"
|
|
render={({ field }) => (
|
|
<FormItem className="grid gap-2">
|
|
<FormLabel htmlFor="name">Prénom</FormLabel>
|
|
<FormControl>
|
|
<Input
|
|
id="firstname"
|
|
placeholder="John Doe"
|
|
type="text"
|
|
autoComplete="firstname"
|
|
{...field}
|
|
/>
|
|
</FormControl>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
<div className="grid gap-4">
|
|
{/* Firstname Field */}
|
|
<FormField
|
|
control={form.control}
|
|
name="lastname"
|
|
render={({ field }) => (
|
|
<FormItem className="grid gap-2">
|
|
<FormLabel htmlFor="lastname">Nom</FormLabel>
|
|
<FormControl>
|
|
<Input
|
|
id="lastname"
|
|
placeholder="John Doe"
|
|
type="text"
|
|
autoComplete="lastname"
|
|
{...field}
|
|
/>
|
|
</FormControl>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
|
|
{/* Email Field */}
|
|
<FormField
|
|
control={form.control}
|
|
name="email"
|
|
render={({ field }) => (
|
|
<FormItem className="grid gap-2">
|
|
<FormLabel htmlFor="email">Email</FormLabel>
|
|
<FormControl>
|
|
<Input
|
|
id="email"
|
|
placeholder="johndoe@mail.com"
|
|
type="email"
|
|
autoComplete="email"
|
|
{...field}
|
|
/>
|
|
</FormControl>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
|
|
{/* Message Field */}
|
|
<FormField
|
|
control={form.control}
|
|
name="phone"
|
|
render={({ field }) => (
|
|
<FormItem className="grid gap-2">
|
|
<FormLabel htmlFor="phone">Phone number</FormLabel>
|
|
<FormControl>
|
|
<Input
|
|
id="phone"
|
|
placeholder="0648265441"
|
|
type="number"
|
|
autoComplete="phone"
|
|
{...field}
|
|
/>
|
|
</FormControl>
|
|
<FormMessage />
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
|
|
<Button type="submit" className="w-full">
|
|
Add member
|
|
</Button>
|
|
</div>
|
|
</form>
|
|
</Form>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
)
|
|
}
|