Improve page transition and product card badge

12 files changed, 44 insertions, 45 deletions

diff --git a/src/components/Layout.js b/src/components/Layout.js
index 42d8ebdf..6933d535 100644
--- a/src/components/Layout.js
+++ b/src/components/Layout.js
@@ -1,15 +1,9 @@
 import { motion } from 'framer-motion'; 
 
-export default function Layout({ children, pageProps }) {
-  const variants = {
-    hidden: { opacity: 0, x: -75, y: 0 },
-    enter: { opacity: 1, x: 0, y: 0 },
-    exit: { opacity: 0, x: 0, y: -50 },
-  };
-
+export default function Layout({ children, ...pageProps }) {
   const transition = { 
     ease: 'linear', 
-    duration: 0.4 
+    duration: 0.3 
   };
 
   return children && (
diff --git a/src/components/ProductCard.js b/src/components/ProductCard.js
index 3b0ef162..063a5f6b 100644
--- a/src/components/ProductCard.js
+++ b/src/components/ProductCard.js
@@ -13,7 +13,7 @@ export default function ProductCard({ data }) {
       <Link href={'/shop/product/' + createSlug(product.name, product.id)} className="block relative bg-white">
         <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-green">{product.variant_total} Varian</div>
+          <div className="absolute bottom-2 left-2 badge-gray">{product.variant_total} Varian</div>
         ) : ''}
       </Link>
       <div className="product-card__description">
diff --git a/src/pages/404.js b/src/pages/404.js
index 652d9e96..e22eadea 100644
--- a/src/pages/404.js
+++ b/src/pages/404.js
@@ -1,24 +1,27 @@
 import Image from "next/image";
 import Link from "next/link";
 import Header from "../components/Header";
+import Layout from "../components/Layout";
 import PageNotFoundImage from "../images/page-not-found.png";
 
 export default function PageNotFound() {
   return (
     <>
       <Header title="Halaman Tidak Ditemukan - Indoteknik" />
-      <main className="pb-8">
-        <Image src={PageNotFoundImage} alt="Halaman Tidak Ditemukan - Indoteknik" className="w-full" />
-        <p className="mt-3 h1 text-center">Halaman tidak ditemukan</p>
-        <div className="mt-6 flex px-4 gap-x-3">
-          <Link href="/" className="btn-light flex-1">
-            Kembali ke beranda
-          </Link>
-          <a href="https://send.whatsapp.com" className="btn-yellow flex-1 h-fit">
-            Tanya admin
-          </a>
-        </div>
-      </main>
+      <Layout>
+        <main className="pb-8">
+          <Image src={PageNotFoundImage} alt="Halaman Tidak Ditemukan - Indoteknik" className="w-full" />
+          <p className="mt-3 h1 text-center">Halaman tidak ditemukan</p>
+          <div className="mt-6 flex px-4 gap-x-3">
+            <Link href="/" className="btn-light flex-1">
+              Kembali ke beranda
+            </Link>
+            <a href="https://send.whatsapp.com" className="btn-yellow flex-1 h-fit">
+              Tanya admin
+            </a>
+          </div>
+        </main>
+      </Layout>
     </>
   );
 }
\ No newline at end of file
diff --git a/src/pages/_app.js b/src/pages/_app.js
index faa8b2b4..a7a8e86e 100644
--- a/src/pages/_app.js
+++ b/src/pages/_app.js
@@ -3,8 +3,6 @@ import NextProgress from 'next-progress';
 import { ToastContainer, Slide } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
 import { useRouter } from 'next/router';
-import { useEffect, useState } from 'react';
-import Image from 'next/image';
 import { AnimatePresence } from 'framer-motion';
 
 function MyApp({ Component, pageProps }) {
@@ -20,14 +18,9 @@ function MyApp({ Component, pageProps }) {
         transition={Slide}
         limit={1}
       />
-      <NextProgress color="#D7A30A" options={{
-        showSpinner: false,
-      }} />
-      <AnimatePresence
-        mode='sync'
-        initial={false}
-      >
-        <Component {...pageProps} />
+      <NextProgress color="#D7A30A" options={{ showSpinner: false }} />
+      <AnimatePresence mode='wait' initial={false}>
+        <Component {...pageProps} key={router.asPath} />
       </AnimatePresence>
     </>
   )
diff --git a/src/pages/activate.js b/src/pages/activate.js
index 8c4fc9aa..cb1385ba 100644
--- a/src/pages/activate.js
+++ b/src/pages/activate.js
@@ -5,6 +5,7 @@ import Link from "next/link";
 import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
 import Alert from "../components/Alert";
+import Layout from "../components/Layout";
 import Spinner from "../components/Spinner";
 import { setAuth } from "../helpers/auth";
 import Logo from "../images/logo.png";
@@ -78,7 +79,7 @@ export default function Activate() {
       <Head>
         <title>Aktivasi Akun Indoteknik</title>
       </Head>
-      <main className="max-w-lg mx-auto flex flex-col items-center px-4 pb-8">
+      <Layout className="max-w-lg mx-auto flex flex-col items-center px-4 pb-8">
         <Link href="/" className="mt-16">
           <Image src={Logo} alt="Logo Indoteknik" width={165} height={42} />
         </Link>
@@ -104,7 +105,7 @@ export default function Activate() {
             ) : 'Kirim Email'}
           </button>
         </form>
-      </main>
+      </Layout>
     </>
   )
 }
\ No newline at end of file
diff --git a/src/pages/index.js b/src/pages/index.js
index a0363a62..a3b4ade9 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -46,7 +46,7 @@ export default function Home() {
   return (
     <>
       <Header title='Home - Indoteknik' />
-      <Layout key='/home'>
+      <Layout>
         <Swiper slidesPerView={1} pagination={{dynamicBullets: true}} modules={[Pagination, Autoplay]}>
           {
             heroBanners?.map((banner, index) => (
diff --git a/src/pages/login.js b/src/pages/login.js
index 20912242..e0535cd2 100644
--- a/src/pages/login.js
+++ b/src/pages/login.js
@@ -5,6 +5,7 @@ import Link from "next/link";
 import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
 import Alert from "../components/Alert";
+import Layout from "../components/Layout";
 import Spinner from "../components/Spinner";
 import { setAuth } from "../helpers/auth";
 import Logo from "../images/logo.png";
@@ -52,7 +53,7 @@ export default function Login() {
       <Head>
         <title>Masuk - Indoteknik</title>
       </Head>
-      <main className="max-w-lg mx-auto flex flex-col items-center px-4 pb-8">
+      <Layout className="max-w-lg mx-auto flex flex-col items-center px-4 pb-8">
         <Link href="/" className="mt-16">
           <Image src={Logo} alt="Logo Indoteknik" width={165} height={42} />
         </Link>
@@ -88,7 +89,7 @@ export default function Login() {
           </button>
         </form>
         <p className="text-gray-700 mt-4">Belum punya akun Indoteknik? <Link href="/register">Daftar</Link></p>
-      </main>
+      </Layout>
     </>
   )
 }
\ No newline at end of file
diff --git a/src/pages/register.js b/src/pages/register.js
index d1a7dee1..076710f9 100644
--- a/src/pages/register.js
+++ b/src/pages/register.js
@@ -4,6 +4,7 @@ import Image from "next/image";
 import Link from "next/link";
 import { useEffect, useState } from "react";
 import Alert from "../components/Alert";
+import Layout from "../components/Layout";
 import Spinner from "../components/Spinner";
 import Logo from "../images/logo.png";
 
@@ -50,7 +51,7 @@ export default function Login() {
       <Head>
         <title>Daftar - Indoteknik</title>
       </Head>
-      <main className="max-w-lg mx-auto flex flex-col items-center px-4 pb-8">
+      <Layout className="max-w-lg mx-auto flex flex-col items-center px-4 pb-8">
         <Link href="/" className="mt-16">
           <Image src={Logo} alt="Logo Indoteknik" width={165} height={42} />
         </Link>
@@ -90,7 +91,7 @@ export default function Login() {
           </button>
         </form>
         <p className="text-gray-700 mt-4">Sudah punya akun Indoteknik? <Link href="/login">Masuk</Link></p>
-      </main>
+      </Layout>
     </>
   )
 }
\ No newline at end of file
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>
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 8981f0c7..7a61d17a 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -32,6 +32,7 @@ html, body {
 
 @layer components {
     .badge-red,
+    .badge-gray,
     .badge-yellow,
     .badge-green {
         @apply
@@ -51,6 +52,13 @@ html, body {
         ;
     }
 
+    .badge-gray {
+        @apply
+            bg-gray-300
+            text-gray-900
+        ;
+    }
+
     .badge-yellow {
         @apply
             bg-yellow-300