add input max and min

football-betting · Jun 7, 2024 · eb488c3 · eb488c3
1 parent 7a12f6e
commit eb488c3
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 4 deletions.
diff --git a/src/components/Input.astro b/src/components/Input.astro
@@ -6,12 +6,13 @@ interface Props {
     type?: string;
     value?: string;
     background?: string;
+    extraAttributes?: Record<string, string | number>;
 }
 
-const { label, name, placeholder, type = 'text', value, background = 'bg-neutral-800' } = Astro.props;
+const { label, name, placeholder, type = 'text', value, background = 'bg-neutral-800', extraAttributes = {}  } = Astro.props;
 ---
 
 <div class={`rounded-md px-3 pb-3.5 pt-2.5 shadow-sm ring-2 ring-inset ring-gray-500 focus-within:ring-gray-400 ${background}`}>
     {label && <label for={name} class="note_sans block text-xs font-bold text-gray-400">{label}</label>}
-    <input required type={type} name={name} id={name} class={`${background} block w-full border-0 p-0 placeholder:text-gray-300 focus:ring-0`} placeholder={placeholder} {...(value != null && value !== "" ? { value } : {})} />
+    <input required type={type} name={name} id={name} class={`${background} block w-full border-0 p-0 placeholder:text-gray-300 focus:ring-0`} placeholder={placeholder} {...extraAttributes} {...(value != null && value !== "" ? { value } : {})} />
 </div>
diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -99,10 +99,10 @@ const groupedGames = validGames.reduce((acc, game) => {
                                             <div class="match-tip">
                                                 <form class={`match-tip-grid form-tip-score ${game.tipHome !== null && game.tipAway !== null ? 'hidden' : ''}`} method="POST" data-form-id={game.id} action={`/api/tip/${game.id}`}>
                                                     <div class="match-tip-grid-score1 pr-4 pt-2">
-                                                        <Input type="number" name="tip1" value={game.tipHome} background="bg-neutral-900" />
+                                                        <Input type="number" name="tip1" value={game.tipHome} background="bg-neutral-900" extraAttributes={{ min: 0, max: 20 }}/>
                                                     </div>
                                                     <div class="match-tip-grid-score2 pr-4 pb-2">
-                                                        <Input type="number" name="tip2" value={game.tipAway} background="bg-neutral-900" />
+                                                        <Input type="number" name="tip2" value={game.tipAway} background="bg-neutral-900" extraAttributes={{ min: 0, max: 20 }}/>
                                                     </div>
                                                     <div class="match-tip-grid-score-last-box">
                                                         <div class="ml-6 mr-6 xl:mr-0">