This commit is contained in:
cdricms
2025-01-22 17:54:03 +01:00
parent 11d072740f
commit f9dce4b40b
3 changed files with 88 additions and 86 deletions

View File

@@ -1,8 +1,8 @@
'use client'
"use client";
import { z } from 'zod'
import { zodResolver } from '@hookform/resolvers/zod'
import { useForm } from 'react-hook-form'
import { z } from "zod";
import { zodResolver } from "@hookform/resolvers/zod";
import { useForm } from "react-hook-form";
import {
Form,
@@ -11,43 +11,39 @@ import {
FormItem,
FormLabel,
FormMessage,
} from '@/components/ui/form'
import { Button } from '@/components/ui/button'
} 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'
} 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' }),
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' }),
.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' }),
})
.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: '',
firstname: "",
lastname: "",
phone: "",
email: "",
},
})
});
async function onSubmit(values: z.infer<typeof formSchema>) {
try {
@@ -59,7 +55,7 @@ export default function ContactFormPreview() {
} catch (error) {
console.error("Form submission error", error);
}
console.log("subimted")
console.log("subimted");
}
return (
@@ -68,12 +64,16 @@ export default function ContactFormPreview() {
<CardHeader>
<CardTitle className="text-2xl">Contact Us</CardTitle>
<CardDescription>
Please fill out the form below and we will get back to you shortly.
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">
<form
onSubmit={form.handleSubmit(onSubmit)}
className="space-y-8"
>
<div className="grid gap-4">
{/* Firstname Field */}
<FormField
@@ -81,7 +81,9 @@ export default function ContactFormPreview() {
name="firstname"
render={({ field }) => (
<FormItem className="grid gap-2">
<FormLabel htmlFor="name">Prénom</FormLabel>
<FormLabel htmlFor="name">
Prénom
</FormLabel>
<FormControl>
<Input
id="firstname"
@@ -102,7 +104,9 @@ export default function ContactFormPreview() {
name="lastname"
render={({ field }) => (
<FormItem className="grid gap-2">
<FormLabel htmlFor="lastname">Nom</FormLabel>
<FormLabel htmlFor="lastname">
Nom
</FormLabel>
<FormControl>
<Input
id="lastname"
@@ -123,7 +127,9 @@ export default function ContactFormPreview() {
name="email"
render={({ field }) => (
<FormItem className="grid gap-2">
<FormLabel htmlFor="email">Email</FormLabel>
<FormLabel htmlFor="email">
Email
</FormLabel>
<FormControl>
<Input
id="email"
@@ -144,7 +150,9 @@ export default function ContactFormPreview() {
name="phone"
render={({ field }) => (
<FormItem className="grid gap-2">
<FormLabel htmlFor="phone">Phone number</FormLabel>
<FormLabel htmlFor="phone">
Phone number
</FormLabel>
<FormControl>
<Input
id="phone"
@@ -163,10 +171,11 @@ export default function ContactFormPreview() {
Add member
</Button>
</div>
</div>
</form>
</Form>
</CardContent>
</Card>
</div>
)
);
}