Fixed Card Issues + Added Styling

sqwatato · Aug 21, 2023 · e4d9e2f · e4d9e2f
1 parent 2d8848f
commit e4d9e2f
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 22 deletions.
diff --git a/components/PetCard.tsx b/components/PetCard.tsx
@@ -28,17 +28,19 @@ const PetCard = ({ type, name, species, breed, age, gender, size, description, s
 
   return (
     <div className="max-w-screen-xl px-4 py-16 mx-auto sm:px-6 lg:px-8">
-      <div className="max-w-sm rounded-lg overflow-hidden shadow-lg">
-        <img src={image} alt="hero image" />
+      <div className="max-w-sm w-full h-full rounded-lg overflow-hidden shadow-lg border border-gray-300 border-opacity-50">
+        <div className="relative h-40 bg-gray-100"> {/**Use this to adjust image height*/}
+          <img className="object-contain w-full h-full" src={image} alt="hero image" />
+        </div>
         <div className="px-6 py-4">
           <div className="font-bold text-xl mb-2 text-black">{name}</div>
           <p className="text-gray-700 text-base">
             {description.length > 100 ? description.substring(0, 100) + "..." : description}
           </p>
         </div>
         <div className="px-6 pt-4 pb-2">
-          <span className="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">{type == 'A' ? 'Adoption' : 'Foster' }</span>
-          <span className="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">{age} years old</span>
+          <span className="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">{type === 'A' ? 'Adoption' : 'Foster'}</span>
+          <span className="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">{age} y/o</span>
           <span className="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">{breed}</span>
           <span className="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">{gender}</span>
         </div>

diff --git a/components/Search.tsx b/components/Search.tsx
@@ -146,16 +146,22 @@ const Search = (props: any) => {
         </div>
         <div className="mt-12">
           <form className="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
-            <div className="sm:col-span-2 lg:col-span-3">
-              <label htmlFor="search" className="sr-only">Search</label>
+          <div className="sm:col-span-2 lg:col-span-3 relative">
+            <label htmlFor="search" className="sr-only">Search</label>
               <div className="relative">
                 <div className="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
                   <svg className="w-5 h-5 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
                     <path fillRule="evenodd" clipRule="evenodd" d="M8.25 1.5a6.75 6.75 0 100 13.5 6.75 6.75 0 000-13.5zM0 8.25a8.25 8.25 0 1116.5 0 8.25 8.25 0 01-16.5 0z"/>
                     <path d="M13.5 13.5l4.5 4.5"/>
                   </svg>
                 </div>
-                <input id="search" name="search" className="block w-full py-3 pl-10 pr-3 text-base text-gray-900 placeholder-gray-500 bg-white border border-gray-300 rounded-md shadow-sm appearance-none focus:outline-none focus:ring-green-500 focus:border-green-500 sm:text-sm" placeholder="Search by city, state, or zip code" type="search" />
+                <input
+                  id="search"
+                  name="search"
+                  className="block w-full py-3 pl-10 pr-3 text-base text-gray-900 placeholder-gray-500 bg-white border border-gray-300 rounded-md shadow-sm appearance-none focus:outline-none focus:ring-green-500 focus:border-green-500 sm:text-sm"
+                  placeholder="Search by city, state, or zip code"
+                  type="search"
+                />
               </div>
             </div>
             <div className="sm:col-span-2 lg:col-span-1">
@@ -171,15 +177,15 @@ const Search = (props: any) => {
             <div className="sm:col-span-2 lg:col-span-1">
               <label htmlFor="breed" className="sr-only">Breed</label>
               <select onChange={(event) => setSelectedBreed(event.target.value)} id="breed" name="breed" 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">
-              {
-                selectedAnimal !== "None" ? (
-                  getBreeds(selectedAnimal).map((breed: string, index: number) => (
-                    <option key={index}>{breed}</option>
-                  ))
-                ) : (
-                  <option>Breed (Any)</option>
-                )
-              }
+                {
+                  selectedAnimal !== "None" ? (
+                    getBreeds(selectedAnimal).map((breed: string, index: number) => (
+                      <option key={index}>{breed}</option>
+                    ))
+                  ) : (
+                    <option>Breed (Any)</option>
+                  )
+                }
               </select>
             </div>
             <div className="sm:col-span-2 lg:col-span-1">
@@ -205,12 +211,16 @@ const Search = (props: any) => {
           </form>
         </div>
       </div>
-      <div className="inline-flex">
-        {
-          pets.map((pet) => (
-            sortPets(pet)
-          ))
-        }
+      <div className="flex justify-center">
+        <div className="grid grid-cols-3 gap-4">
+          {
+            pets.map((pet) => (
+              <div key={pet.id} className="flex justify-center">
+                {sortPets(pet)}
+              </div>
+            ))
+          }
+        </div>
       </div>
     </section>
   );