Improve page transition and product card badge

3 files changed, 5 insertions, 7 deletions

diff --git a/src/pages/shop/brands.js b/src/pages/shop/brands.js
index 00e33f31..2dda69a1 100644
--- a/src/pages/shop/brands.js
+++ b/src/pages/shop/brands.js
@@ -26,7 +26,7 @@ export default function Brands({ initialManufactures }) {
   return (
     <>
       <Header title='Semua Brand di Indoteknik' />
-      <Layout key='/shop/brands'>
+      <Layout>
         <div className="p-4">
           <h1>Semua Brand di Indoteknik</h1>
           <InfiniteScroll
diff --git a/src/pages/shop/product/[slug].js b/src/pages/shop/product/[slug].js
index 923962e2..352edb99 100644
--- a/src/pages/shop/product/[slug].js
+++ b/src/pages/shop/product/[slug].js
@@ -46,7 +46,7 @@ export default function ProductDetail({product}) {
       const dataSimilarProducts = await apiOdoo('GET', `/api/v1/product/${getId(slug)}/similar?limit=20`);
       setSimilarProducts(dataSimilarProducts);
     }
-    getSimilarProducts();
+    if (slug) getSimilarProducts();
   }, [slug]);
 
   useEffect(() => {
@@ -81,8 +81,7 @@ export default function ProductDetail({product}) {
   return (
     <>
       <Header title={`${product.name} - Indoteknik`}/>
-      <Layout key={`/shop/product/${slug}`}>
-
+      <Layout>
         <LazyLoadImage effect="blur" src={product.image} alt={product.name} className="border-b border-gray-300 w-full h-[300px] object-contain object-center bg-white" />
         <div className="p-4 pb-10">
           <Link href={'/shop/brands/' + createSlug(product.manufacture.name, product.manufacture.id)}>
@@ -96,7 +95,7 @@ export default function ProductDetail({product}) {
 
           {product.lowest_price.discount_percentage > 0 ? (
             <div className="flex gap-x-1 items-center">
-              <span className="badge-yellow">{activeVariant.price.discount_percentage}%</span>
+              <span className="badge-red">{activeVariant.price.discount_percentage}%</span>
               <p className="text-xs text-gray-800 line-through">{currencyFormat(activeVariant.price.price)}</p>
             </div>
           ) : ''} 
@@ -169,7 +168,6 @@ export default function ProductDetail({product}) {
             <h2 className="h1 mb-4">Produk Lainnya</h2>
             <ProductSlider products={similarProducts}/>
           </div>
-
         </div>
       </Layout>
     </>
diff --git a/src/pages/shop/search.js b/src/pages/shop/search.js
index d0917666..21a4ccd9 100644
--- a/src/pages/shop/search.js
+++ b/src/pages/shop/search.js
@@ -20,7 +20,7 @@ export default function ShopSearch({ searchResults, q, page }) {
   return (
     <>
       <Header title={`Jual ${q} - Indoteknik`} />
-      <Layout key={`/shop/search?q=${q}&page=${page}`}>
+      <Layout>
         <div className="p-4">
           <div className="flex justify-between items-center gap-x-2 mb-1">
             <h1>Produk</h1>