Merge remote-tracking branch 'origin/dev/guerby' into dev/cedric
This commit is contained in:
cdricms
172
frontend/app/(auth)/dashboard/members/new/new_member.tsx
Normal file
172
frontend/app/(auth)/dashboard/members/new/new_member.tsx
Normal file
@@ -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">
|
||||
Add member
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</Form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -23,21 +23,26 @@ export default async function About() {
|
||||
);
|
||||
return (
|
||||
<>
|
||||
<div className="px-24 py-28 lg:py-32">
|
||||
<div className="flex flex-row gap-4 justify-center w-full pb-24">
|
||||
<div className="flex flex-col gap-4 w-3/5 justify-center">
|
||||
<Card className="pt-10 pb-5 max-h-fit">
|
||||
<div className="px-4 py-8 lg:px-24 lg:py-32">
|
||||
<div className="
|
||||
flex flex-col lg:flex-row gap-4
|
||||
justify-center w-full pb-24">
|
||||
<div className="
|
||||
flex flex-col gap-4 w-full
|
||||
lg:w-3/5 justify-center">
|
||||
<Card className="py-5 sm:mx-10 max-h-fit">
|
||||
<CardHeader className="text-center p-2">
|
||||
<CardTitle className="m-5">
|
||||
Entraîneur depuis 60 ans
|
||||
</CardTitle>
|
||||
<span className="font-bold text-5xl">
|
||||
<span className="font-bold text-4xl
|
||||
sm:text-4xl">
|
||||
Robert Louis Jean Jacke
|
||||
</span>
|
||||
</CardHeader>
|
||||
<CardContent className="px-28 py-14">
|
||||
<div className="flex gap-4 flex-col justify-center">
|
||||
<h2 className="text-pretty text-xl font-semibold md:mb-0.5 md:text-4xl lg:mb-1 lg:max-w-3xl lg:text-3xl">
|
||||
<CardContent className="px-8 sm:px-10 py-14">
|
||||
<div className="flex flex-col gap-4 justify-center">
|
||||
<h2 className="text-pretty text-center text-xl font-semibold md:mb-0.5 lg:mb-1 lg:max-w-3xl sm:text-3xl">
|
||||
Lorem ipsum, dolor sit amet
|
||||
</h2>
|
||||
<p className="blog-paragraph text-muted-foreground">
|
||||
@@ -48,7 +53,7 @@ export default async function About() {
|
||||
praesentium ea placeat ad, neque eveniet
|
||||
adipisci?
|
||||
</p>
|
||||
<h2 className="text-pretty text-xl font-semibold md:mb-0.5 md:text-4xl lg:mb-1 lg:max-w-3xl lg:text-3xl">
|
||||
<h2 className="text-pretty text-center text-xl font-semibold md:mb-0.5 lg:mb-1 lg:max-w-3xl sm:text-3xl">
|
||||
Lorem ipsum, dolor sit amet
|
||||
</h2>
|
||||
<p className="blog-paragraph text-muted-foreground">
|
||||
@@ -62,28 +67,44 @@ export default async function About() {
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<div className="max-w-full text-center" >
|
||||
<h2 className="text-pretty text-xl font-semibold md:mb-0.5 md:text-4xl lg:mb-1 lg:max-w-3xl lg:text-3xl">
|
||||
<div className="max-w-full my-8 text-center lg:hidden" >
|
||||
<h2 className="text-pretty text-xl font-semibold mb-4 sm:mb-8 sm:text-3xl lg:mb-1 lg:max-w-3xl">
|
||||
Mes associés
|
||||
</h2>
|
||||
<div className="relative items-center justify-center flex flex-row gap-14 w-full">
|
||||
<Avatar className="w-20 h-20 m-4">
|
||||
<AvatarImage className="rounded-full z-10" src="https://github.com/shadcn.png" alt="@shadcn" />
|
||||
<div className="absolute border rounded-xl py-0.5 px-5 w-fit opacity-100 top-20 left-[calc(50%+11em)] translate-x-[-50%] bg-white z-50">
|
||||
Marc Zuckenberg
|
||||
<div className="relative flex flex-col lg:flex-row items-center justify-center overflow-y-visible gap-6 w-full">
|
||||
<Avatar className="flex flex-row gap-9 w-20 h-20 m-1">
|
||||
<AvatarImage className="rounded-full z-50 ld:md:z-10" src="https://github.com/shadcn.png" alt="@shadcn" />
|
||||
|
||||
<div className="
|
||||
md:absolute border self-center rounded-xl font-bold
|
||||
text-center
|
||||
py-4 px-8 lg:md:px-5 w-fit opacity-100 lg:md:top-20
|
||||
md:left-[calc(50%-11em)] translate-x-[-50%] lg:left-[calc(50% -4em)]
|
||||
sm:translate-x-[100%] lg:translate-x-[50%] z-40 lg:md:z-50">
|
||||
Richard Vagneur
|
||||
</div>
|
||||
|
||||
<AvatarFallback>CN</AvatarFallback>
|
||||
</Avatar>
|
||||
<Avatar className="w-20 h-20 m-4">
|
||||
<AvatarImage className="rounded-full z-10" src="https://github.com/shadcn.png" alt="@shadcn" />
|
||||
<div className="absolute border rounded-xl py-0.5 px-5 w-fit opacity-100 top-20 left-[calc(50%)] translate-x-[-50%] bg-white z-50">
|
||||
<Avatar className="flex flex-row translate-x-[-8em] gap-9 w-20 h-20 m-1">
|
||||
<AvatarImage className="rounded-full z-50 ld:md:z-10" src="https://github.com/shadcn.png" alt="@shadcn" />
|
||||
<div className="
|
||||
md:absolute border rounded-xl font-bold text-center
|
||||
py-4 px-8 lg:md:px-5 w-fit opacity-100 lg:md:top-20
|
||||
md:left-[calc(50%)] translate-x-[-50%] z-40 lg:md:z-50
|
||||
sm:translate-x-[-50%] lg:translate-x-[-50%] self-center">
|
||||
Robert Lewis
|
||||
</div>
|
||||
<AvatarFallback>CN</AvatarFallback>
|
||||
</Avatar>
|
||||
<Avatar className="w-20 h-20 m-4">
|
||||
<AvatarImage className="rounded-full z-10" src="https://github.com/shadcn.png" alt="@shadcn" />
|
||||
<div className="absolute border rounded-xl py-0.5 px-5 w-fit opacity-100 top-20 left-[calc(50%-11em)] translate-x-[-50%] bg-white z-50">
|
||||
<Avatar className="flex flex-row gap-9 w-20 h-20 m-1">
|
||||
<AvatarImage className="rounded-full z-50 ld:md:z-10" src="https://github.com/shadcn.png" alt="@shadcn" />
|
||||
<div className="
|
||||
md:absolute border rounded-xl font-bold text-center
|
||||
py-4 px-8 lg:md:px-5 w-fit opacity-100 lg:md:top-20
|
||||
md:left-[calc(50%-11em)] translate-x-[-50%] z-40
|
||||
lg:md:z-50 sm:translate-x-[125%] sm:self-center
|
||||
lg:translate-x-[-100%]">
|
||||
Marria Caré
|
||||
</div>
|
||||
<AvatarFallback>CN</AvatarFallback>
|
||||
@@ -91,9 +112,9 @@ export default async function About() {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="container w-2/5 h-fit border rounded">
|
||||
<div className="w-full lg:w-2/5 sm:self-center sm:w-3/5 h-fit border rounded">
|
||||
<img
|
||||
className=""
|
||||
className="w-full"
|
||||
src="https://shadcnblocks.com/images/block/placeholder-dark-1.svg"
|
||||
alt="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.
|
||||
</p>
|
||||
</div>
|
||||
<div className="mt-12 flex flex-row justify-center gap-6 lg:items-center">
|
||||
<div className="mt-12 flex flex-col sm:flex-row px-12 justify-center gap-6 lg:items-center">
|
||||
<Card className="border-primary">
|
||||
<CardHeader className="text-center pb-2">
|
||||
<Badge className="uppercase w-max self-center mb-3">
|
||||
|
||||
Reference in New Issue
Block a user