From eb488c38e601dcacf9e823aef364400649598c74 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Rafa=C5=82=20Weso=C5=82owski?=
 <rafal.wesolowski@cec.valantic.com>
Date: Fri, 7 Jun 2024 13:26:32 +0200
Subject: [PATCH] add input max and min

---
 src/components/Input.astro | 5 +++--
 src/pages/index.astro      | 4 ++--
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/components/Input.astro b/src/components/Input.astro
index d41797c..45bc821 100644
--- 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
index 65ce43f..dde5fdb 100644
--- 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">