Add page transition

3 files changed, 9 insertions, 6 deletions

diff --git a/src/pages/shop/brands.js b/src/pages/shop/brands.js
index 797843ee..499eaf99 100644
--- a/src/pages/shop/brands.js
+++ b/src/pages/shop/brands.js
@@ -7,6 +7,7 @@ import { createSlug } from "../../helpers/slug";
 import InfiniteScroll from "react-infinite-scroll-component";
 import { useState } from "react";
 import Spinner from "../../components/Spinner";
+import Layout from "../../components/Layout";
 
 export async function getServerSideProps() {
   let initialManufactures = await apiOdoo('GET', '/api/v1/manufacture?limit=31');
@@ -25,7 +26,7 @@ export default function Brands({ initialManufactures }) {
   return (
     <>
       <Header title='Semua Brand di Indoteknik' />
-      <main className="p-4">
+      <Layout className='p-4' key='/shop/brands'>
         <h1>Semua Brand di Indoteknik</h1>
         <InfiniteScroll
           dataLength={manufactures.length}
@@ -48,7 +49,7 @@ export default function Brands({ initialManufactures }) {
             ) : ''
           ))}
         </InfiniteScroll>
-      </main>
+      </Layout>
     </>
   )
 }
\ No newline at end of file
diff --git a/src/pages/shop/product/[slug].js b/src/pages/shop/product/[slug].js
index a42e6cb9..923962e2 100644
--- a/src/pages/shop/product/[slug].js
+++ b/src/pages/shop/product/[slug].js
@@ -8,6 +8,7 @@ import currencyFormat from "../../../helpers/currencyFormat";
 import { LazyLoadImage } from "react-lazy-load-image-component";
 import "react-lazy-load-image-component/src/effects/blur.css";
 import ProductSlider from "../../../components/product/ProductSlider";
+import Layout from "../../../components/Layout";
 
 export async function getServerSideProps(context) {
   const { slug } = context.query;
@@ -80,7 +81,7 @@ export default function ProductDetail({product}) {
   return (
     <>
       <Header title={`${product.name} - Indoteknik`}/>
-      <main>
+      <Layout key={`/shop/product/${slug}`}>
 
         <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">
@@ -170,7 +171,7 @@ export default function ProductDetail({product}) {
           </div>
 
         </div>
-      </main>
+      </Layout>
     </>
   );
 }
\ No newline at end of file
diff --git a/src/pages/shop/search.js b/src/pages/shop/search.js
index ce76f88e..d0917666 100644
--- a/src/pages/shop/search.js
+++ b/src/pages/shop/search.js
@@ -1,5 +1,6 @@
 import axios from "axios";
 import Header from "../../components/Header";
+import Layout from "../../components/Layout";
 import Pagination from "../../components/Pagination";
 import ProductCard from "../../components/ProductCard";
 import FilterIcon from "../../icons/filter.svg";
@@ -19,7 +20,7 @@ export default function ShopSearch({ searchResults, q, page }) {
   return (
     <>
       <Header title={`Jual ${q} - Indoteknik`} />
-      <main>
+      <Layout key={`/shop/search?q=${q}&page=${page}`}>
         <div className="p-4">
           <div className="flex justify-between items-center gap-x-2 mb-1">
             <h1>Produk</h1>
@@ -54,7 +55,7 @@ export default function ShopSearch({ searchResults, q, page }) {
             <Pagination pageCount={pageCount} currentPage={parseInt(page)} url={`/shop/search?q=${q}`} />
           </div>
         </div>
-      </main>
+      </Layout>
     </>
   )
 }
\ No newline at end of file