feat: Add hint to search bar. Fix card price overflowing

midudev · Sep 20, 2023 · 415d225 · 415d225
1 parent 0d05e6a
commit 415d225
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 6 deletions.
diff --git a/...s/02-bazar-universal/fernandochaza/simple-shop/src/components/products/CategoryButton.tsx b/...s/02-bazar-universal/fernandochaza/simple-shop/src/components/products/CategoryButton.tsx
@@ -23,7 +23,7 @@ const CategoryButton = ({
     <div
       aria-label="View products by this category"
       onClick={handleOnClick}
-      className={`cursor-pointer row-start-1 col-start-2 text-sm border w-fit rounded-full px-2 h-fit ml-auto mt-auto mb-1 text-blue-800 ${className}`}
+      className={`cursor-pointer text-blue-800 ${className}`}
     >
       {category}
     </div>

diff --git a/pruebas/02-bazar-universal/fernandochaza/simple-shop/src/components/products/ProductCard.tsx b/pruebas/02-bazar-universal/fernandochaza/simple-shop/src/components/products/ProductCard.tsx
@@ -27,10 +27,12 @@ const ProductCard = ({ product }: { product: Product }) => {
     <Link href={`/items/${id}`} className="w-fit mx-auto z-0">
       <article className="bg-slate-50 grid grid-cols-2 auto-rows-min gap-y-2 gap-x-2 relative w-100 max-w-[348px] h-fit mx-auto px-4 py-4 shadow-[5px_5px_20px_#b0b2b3,-5px_-5px_20px_#ffffff] rounded-3xl">
         <div>
-          <h2 className="col-span-full pl-4 text-lg font-extrabold w-60 line-clamp-2 overflow-hidden">
+          <h2 className="min-h-[2rem] col-span-full pl-4 text-lg font-extrabold w-60 line-clamp-2 overflow-hidden">
             {capitalizedTitle}
           </h2>
-          <p className="pl-4 text-sm my-1">{brand}</p>
+          <p className="min-h-[2rem] flex flex-col pl-4 text-sm justify-center">
+            {brand}
+          </p>
         </div>
         <div className="w-[132px] h-[132px] relative mx-auto row-start-2">
           <Image
@@ -52,8 +54,10 @@ const ProductCard = ({ product }: { product: Product }) => {
           rating={rating}
           className="row-start-3 place-self-center my-2"
         />
-        {/* */}
-        <CategoryButton category={capitalizedCategory} />
+        <CategoryButton
+          className="row-start-1 col-start-2 text-sm border w-fit rounded-full px-2 h-fit ml-auto mt-auto mb-1"
+          category={capitalizedCategory}
+        />
         <button
           aria-label="Add to cart"
           onClick={handleClick}

diff --git a/pruebas/02-bazar-universal/fernandochaza/simple-shop/src/components/search/SearchBar.tsx b/pruebas/02-bazar-universal/fernandochaza/simple-shop/src/components/search/SearchBar.tsx
@@ -43,7 +43,7 @@ const SearchBar = (): JSX.Element => {
           type="search"
           id="search-input"
           className="block w-full p-4 pl-10 rounded-xl shadow-[5px_5px_10px_#bcbebe,-5px_-5px_10px_#ffffff] text-base outline-none text-gray-900 bg-gray-50 focus:ring-blue-500 focus:border-blue-500 "
-          placeholder="What are you looking for?"
+          placeholder='Try "samsung" or "nintendo"'
           required
         />
         <button