From e3f42efdcda5779b8e3a94330529cf377eb0ddd9 Mon Sep 17 00:00:00 2001 From: gom-by Date: Wed, 22 Jan 2025 09:57:59 +0100 Subject: [PATCH] mock-up interface for new members --- .../dashboard/members/new/new_member.tsx | 172 +++++++++++++++++ frontend/components/ui/form.tsx | 178 ++++++++++++++++++ frontend/package-lock.json | 39 +++- frontend/package.json | 5 +- 4 files changed, 392 insertions(+), 2 deletions(-) create mode 100644 frontend/app/(auth)/dashboard/members/new/new_member.tsx create mode 100644 frontend/components/ui/form.tsx diff --git a/frontend/app/(auth)/dashboard/members/new/new_member.tsx b/frontend/app/(auth)/dashboard/members/new/new_member.tsx new file mode 100644 index 0000000..c9faafa --- /dev/null +++ b/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>({ + resolver: zodResolver(formSchema), + defaultValues: { + firstname: '', + lastname: '', + phone: '', + email: '', + }, + }) + + async function onSubmit(values: z.infer) { + 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 ( +
+ + + Contact Us + + Please fill out the form below and we will get back to you shortly. + + + +
+ +
+ {/* Firstname Field */} + ( + + Prénom + + + + + + )} + /> +
+ {/* Firstname Field */} + ( + + Nom + + + + + + )} + /> + + {/* Email Field */} + ( + + Email + + + + + + )} + /> + + {/* Message Field */} + ( + + Phone number + + + + + + )} + /> + + +
+ + + + +
+ ) +} diff --git a/frontend/components/ui/form.tsx b/frontend/components/ui/form.tsx new file mode 100644 index 0000000..b6daa65 --- /dev/null +++ b/frontend/components/ui/form.tsx @@ -0,0 +1,178 @@ +"use client" + +import * as React from "react" +import * as LabelPrimitive from "@radix-ui/react-label" +import { Slot } from "@radix-ui/react-slot" +import { + Controller, + ControllerProps, + FieldPath, + FieldValues, + FormProvider, + useFormContext, +} from "react-hook-form" + +import { cn } from "@/lib/utils" +import { Label } from "@/components/ui/label" + +const Form = FormProvider + +type FormFieldContextValue< + TFieldValues extends FieldValues = FieldValues, + TName extends FieldPath = FieldPath +> = { + name: TName +} + +const FormFieldContext = React.createContext( + {} as FormFieldContextValue +) + +const FormField = < + TFieldValues extends FieldValues = FieldValues, + TName extends FieldPath = FieldPath +>({ + ...props +}: ControllerProps) => { + return ( + + + + ) +} + +const useFormField = () => { + const fieldContext = React.useContext(FormFieldContext) + const itemContext = React.useContext(FormItemContext) + const { getFieldState, formState } = useFormContext() + + const fieldState = getFieldState(fieldContext.name, formState) + + if (!fieldContext) { + throw new Error("useFormField should be used within ") + } + + const { id } = itemContext + + return { + id, + name: fieldContext.name, + formItemId: `${id}-form-item`, + formDescriptionId: `${id}-form-item-description`, + formMessageId: `${id}-form-item-message`, + ...fieldState, + } +} + +type FormItemContextValue = { + id: string +} + +const FormItemContext = React.createContext( + {} as FormItemContextValue +) + +const FormItem = React.forwardRef< + HTMLDivElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => { + const id = React.useId() + + return ( + +
+ + ) +}) +FormItem.displayName = "FormItem" + +const FormLabel = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => { + const { error, formItemId } = useFormField() + + return ( +