mock-up interface for new members

frontend/app/(auth)/dashboard/members/new/new_member.tsx

@@ -0,0 +1,172 @@
+'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">
+										Send Message
+									</Button>
+								</div>
+						</form>
+					</Form>
+				</CardContent>
+			</Card>
+		</div>
+	)
+}