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>

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

@@ -18,6 +18,7 @@ import { fetchClubPlayers } from "@/server/fetchClubPlayers";
 interface IProps {
   name: string;
   label: string;
+  className?: string;
   clubOptions: {
     value: string;
     label: string;
@@ -25,7 +26,7 @@ interface IProps {
   }[];
 }
 
-const TeamSelection = ({ name, label, clubOptions }: IProps) => {
+const TeamSelection = ({ name, label, clubOptions, className }: IProps) => {
   const [isLoading, setIsLoading] = useState(false);
 
   const { control } = useFormContext();
@@ -81,7 +82,7 @@ const TeamSelection = ({ name, label, clubOptions }: IProps) => {
     })) || [];
 
   return (
-    <div className="col-span-2 space-y-4">
+    <div className={className}>
       <label className="mb-2 block text-sm font-medium text-gray-900">
         {label}
       </label>