allow empty player slots for manual entry

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

@@ -71,15 +71,24 @@ const TeamSelection = ({ name, label, clubOptions, className }: IProps) => {
     fetchPlayers();
   }, [selectedId, name, setTeamsPlayers]);
 
-  const playerOptions =
+  const playerOptions = [
-    teamsPlayers[name]?.map((player) => ({
+    {
+      value: {
+        nrFFE: "",
+        name: "",
+        elo: "",
+      },
+      label: "-- EMPTY PLAYER --",
+    },
+    ...(teamsPlayers[name]?.map((player) => ({
       value: {
         nrFFE: player.nrFFE,
         name: player.name,
         elo: player.elo,
       },
       label: `${player.name} (${player.elo})`,
-    })) || [];
+    })) || []),
+  ];
 
   return (
     <div className={className}>
@@ -122,7 +131,7 @@ const TeamSelection = ({ name, label, clubOptions, className }: IProps) => {
                     instanceId={`${name}-player-${index}`}
                     options={playerOptions}
                     isSearchable
-                    placeholder="Search player..."
+                    placeholder="Search for a player..."
                     onChange={(option) => selectField.onChange(option?.value)}
                     value={playerOptions.find(
                       (op) => op.value === selectField.value,
@@ -152,7 +161,7 @@ const TeamSelection = ({ name, label, clubOptions, className }: IProps) => {
         teamsPlayers[name]?.length > 0 && (
           <button
             type="button"
-            onClick={() => append({ nrFFE: "", name: "", elo: 0 })}
+            onClick={() => append({ nrFFE: "", name: "", elo: "" })}
             className="flex items-center gap-2 text-sm font-medium text-blue-600 hover:text-blue-800"
           >
             <FaPlus />

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

@@ -46,7 +46,7 @@ export default async function Match() {
   )();
 
   return (
-    <section className="grid place-items-center bg-white pb-20 dark:bg-gray-800">
+    <section className="grid place-items-center bg-white p-2 pb-20 dark:bg-gray-800">
       <div className="mx-auto max-w-screen-md px-4 py-8 lg:py-16">
         <h2 className="mb-4 text-center text-4xl font-extrabold tracking-tight text-gray-900 dark:text-white">
           Match

src/schemas.ts

@@ -65,9 +65,9 @@ export const fetchClubPlayersSchema = z.object({
 });
 
 const matchPlayerSchema = z.object({
-  name: z.string(),
+  name: z.string().optional(),
-  elo: z.string(),
+  elo: z.string().optional(),
-  nrFFE: z.string(),
+  nrFFE: z.string().optional(),
 });
 
 export const matchSchema = z.object({