Updated Age Search

sqwatato · Aug 20, 2023 · 3a82b15 · 3a82b15
1 parent f2be6d7
commit 3a82b15
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 17 deletions.
diff --git 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
@@ -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>