From 3a82b1598d93d5550782aa901bd522c4502a871e Mon Sep 17 00:00:00 2001
From: Mahasvin24 <mahasvin.manikandan@gmail.com>
Date: Sun, 20 Aug 2023 14:20:36 -0700
Subject: [PATCH] Updated Age Search

---
 app/page.tsx          |  9 ---------
 components/Search.tsx | 25 +++++++++++++++++--------
 2 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/app/page.tsx b/app/page.tsx
index c46117d..edf1a27 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -225,14 +225,6 @@ const hermitCrabBreeds = [
   "Coenobita compressus (Ecuadorian Hermit Crab)"
 ];
 
-const ageTypes = [
-  "Age (Any)",
-  "Baby",
-  "Young",
-  "Adult",
-  "Senior"
-];
-
 export default function Home() {
   return (
     <main>
@@ -257,7 +249,6 @@ export default function Home() {
         smallBirdBreeds={smallBirdBreeds}
         smallRodentBreeds={smallRodentBreeds}
         hermitCrabBreeds={hermitCrabBreeds}
-        ageTypes={ageTypes}
       />
       <Contact />
     </main>
diff --git a/components/Search.tsx b/components/Search.tsx
index ede3245..b6d8e72 100644
--- a/components/Search.tsx
+++ b/components/Search.tsx
@@ -48,7 +48,6 @@ const Search = (props: any) => {
   const smallBirdBreeds = props.smallBirdBreeds;
   const smallRodentBreeds = props.smallRodentBreeds;
   const hermitCrabBreeds = props.hermitCrabBreeds;
-  const ageTypes = props.ageTypes;
 
   let [selectedAnimal, setSelectedAnimal] = useState("Species (Any)");
   let [selectedBreed, setSelectedBreed] = useState("Breed (Any)");
@@ -185,13 +184,23 @@ const Search = (props: any) => {
             </div>
             <div className="sm:col-span-2 lg:col-span-1">
               <label htmlFor="age" className="sr-only">Age</label>
-              <select onChange={(event) => setSelectedAge(event.target.value)} id="age" name="age" className="block w-full py-3 pl-3 pr-10 text-base text-gray-900 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-green-500 focus:border-green-500 sm:text-sm">
-                <option>Age (Any)</option>
-                <option>Baby</option>
-                <option>Young</option>
-                <option>Adult</option>
-                <option>Senior</option>
-              </select>
+              <input
+                type="text"
+                pattern="[0-9]*"
+                onChange={(event) => {
+                  const input = event.target.value;
+                  const numericInput = input.replace(/\D/g, "");
+                  if (numericInput === "") {
+                    setSelectedAge("Age (Any)");
+                  } else {
+                    setSelectedAge(numericInput);
+                  }
+                }}
+                id="age"
+                name="age"
+                placeholder="Age (Any)"
+                className="block w-full py-3 pl-3 pr-10 text-base text-gray-900 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-green-500 focus:border-green-500 sm:text-sm"
+              />
             </div>
           </form>
         </div>