add date picker

src/app/[locale]/(main)/match/MatchForm.tsx

@@ -4,7 +4,9 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { FormProvider, useForm } from "react-hook-form";
 import { z } from "zod";
 
+import Calendar from "@/app/[locale]/(main)/components/Calendar";
 import TeamSelection from "@/app/[locale]/(main)/match/components/TeamSelection";
+import { TextField } from "@/components/form/TextField";
 import { matchSchema } from "@/schemas";
 import { Club } from "@/types";
 
@@ -34,7 +36,7 @@ const MatchForm = ({ clubs }: IProps) => {
       //   message: t("success"),
       // });
 
-      form.reset();
+      // form.reset(); // do not reset the form
     } catch (err: unknown) {
       console.log(err);
       //
@@ -54,16 +56,46 @@ const MatchForm = ({ clubs }: IProps) => {
   return (
     <FormProvider {...form}>
       <form onSubmit={form.handleSubmit(onSubmit)} className="w-3/4 space-y-8">
-        <div className="grid grid-cols-4 items-start gap-6">
+        <div className="grid grid-cols-6 items-start gap-6">
+          <div className="col-span-1">
+            <Calendar name="date" control={form.control} label="Date" />
+          </div>
+          <div className="col-span-2">
+            <TextField
+              name="competition"
+              control={form.control}
+              label="Competition"
+              required
+            />
+          </div>
+          <div className="col-span-1">
+            <TextField
+              name="ronde"
+              control={form.control}
+              label="Ronde"
+              type="number"
+              required
+            />
+          </div>
+          <div className="col-span-2">
+            <TextField
+              name="lieu"
+              control={form.control}
+              label="Lieu"
+              required
+            />
+          </div>
           <TeamSelection
             clubOptions={clubOptions}
             name="team1"
             label="Team 1"
+            className="col-span-3 space-y-4"
           />
           <TeamSelection
             clubOptions={clubOptions}
             name="team2"
             label="Team 2"
+            className="col-span-3 space-y-4"
           />
         </div>
         <button type="submit">Submit</button>