Fix product card layout

3 files changed, 30 insertions, 17 deletions

diff --git a/src/components/ProductCard.js b/src/components/ProductCard.js
index 77f902e0..23cc0665 100644
--- a/src/components/ProductCard.js
+++ b/src/components/ProductCard.js
@@ -10,8 +10,11 @@ export default function ProductCard({ data }) {
   let product = data;
   return (
     <div className="product-card">
-      <Link href={'/shop/product/' + createSlug(product.name, product.id)} className="block">
+      <Link href={'/shop/product/' + createSlug(product.name, product.id)} className="block relative">
         <LazyLoadImage effect="blur" src={product.image ? product.image : '/images/noimage.jpeg'} alt={product.name} className="product-card__image" />
+        {product.variant_total > 1 ? (
+          <div className="absolute bottom-2 left-2 badge-yellow">{product.variant_total} Varian</div>
+        ) : ''}
       </Link>
       <div className="product-card__description">
         <div>
@@ -24,7 +27,7 @@ export default function ProductCard({ data }) {
             {product.name}
           </Link>
         </div>
-        <div className="flex-1 mt-2">
+        <div className="mt-2">
           {product.lowest_price.discount_percentage > 0 ? (
             <div className="flex gap-x-1 items-center">
               <span className="badge-yellow">{product.lowest_price.discount_percentage}%</span>
@@ -41,7 +44,7 @@ export default function ProductCard({ data }) {
             </a>
           )}
           {product.stock_total > 0 ? (
-            <div className="badge-yellow bg-green-200 text-green-700 w-fit mt-2">Ready Stock</div>
+            <div className="badge-green mt-2">Ready Stock {product.stock_total > 5 ? '> 5' : '< 5'}</div>
           ) : ''}
         </div>
       </div>
diff --git a/src/pages/shop/search.js b/src/pages/shop/search.js
index a8809918..9b085ad0 100644
--- a/src/pages/shop/search.js
+++ b/src/pages/shop/search.js
@@ -25,10 +25,14 @@ export default function ShopSearch({ searchResults, q, page }) {
             {productFound > 0 ? (
               <>
                 Menampilkan&nbsp;
-                {productStart + 1}-{
-                  (productStart + productRows) > productFound ? productFound : productStart + productRows
-                }
-                &nbsp;dari&nbsp;
+                {pageCount > 1 ? (
+                  <>
+                    {productStart + 1}-{
+                      (productStart + productRows) > productFound ? productFound : productStart + productRows
+                    }
+                    &nbsp;dari&nbsp;
+                  </>
+                ) : ''}
                 {searchResults.response.numFound}
                 &nbsp;produk untuk pencarian <span className="font-semibold">{q}</span>
               </>
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 20a86ec4..4d8c7971 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -30,13 +30,21 @@ html, body {
 }
 
 @layer components {
-    .badge-red {
+    .badge-red,
+    .badge-yellow,
+    .badge-green {
         @apply
             text-xs
             font-medium
             px-1
             py-0.5
             rounded
+            w-fit
+        ;
+    }
+
+    .badge-red {
+        @apply
             bg-red-300
             text-red-900
         ;
@@ -44,16 +52,18 @@ html, body {
 
     .badge-yellow {
         @apply
-            text-xs
-            font-medium
-            px-1
-            py-0.5
-            rounded
             bg-yellow-300
             text-yellow-900
         ;
     }
 
+    .badge-green {
+        @apply
+            bg-green-200 
+            text-green-700
+        ;
+    }
+
     .form-label {
         @apply
             text-sm
@@ -132,10 +142,7 @@ html, body {
         @apply
             p-2
             pb-3
-            flex
-            flex-col
             flex-1
-            justify-between
         ;
     }
 
@@ -143,7 +150,6 @@ html, body {
         @apply
             text-sm
             text-gray-900
-            h-[60px]
         ;
     }