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..6d540aa --- /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/app/(main)/about/page.tsx b/frontend/app/(main)/about/page.tsx index 51f45e3..e8ef1be 100644 --- a/frontend/app/(main)/about/page.tsx +++ b/frontend/app/(main)/about/page.tsx @@ -23,21 +23,26 @@ export default async function About() { ); return ( <> -
-
-
- +
+
+
+ Entraîneur depuis 60 ans - + Robert Louis Jean Jacke - -
-

+ +
+

Lorem ipsum, dolor sit amet

@@ -48,7 +53,7 @@ export default async function About() { praesentium ea placeat ad, neque eveniet adipisci?

-

+

Lorem ipsum, dolor sit amet

@@ -62,28 +67,44 @@ export default async function About() {

-
-

+
+

Mes associés

-
- - -
- Marc Zuckenberg +
+ + + +
+ Richard Vagneur
+ CN - - -
+ + +
Robert Lewis
CN - - -
+ + +
Marria Caré
CN @@ -91,9 +112,9 @@ export default async function About() {
-
+
president profile image @@ -111,7 +132,7 @@ export default async function About() { equipement (gants, casque) pris en compte. Prévoir une tenue sportive adaptée.

-
+
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 ( +