summaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/components/Layout.js10
-rw-r--r--src/components/ProductCard.js2
-rw-r--r--src/pages/404.js27
-rw-r--r--src/pages/_app.js13
-rw-r--r--src/pages/activate.js5
-rw-r--r--src/pages/index.js2
-rw-r--r--src/pages/login.js5
-rw-r--r--src/pages/register.js5
-rw-r--r--src/pages/shop/brands.js2
-rw-r--r--src/pages/shop/product/[slug].js8
-rw-r--r--src/pages/shop/search.js2
-rw-r--r--src/styles/globals.css8
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
generated by cgit v1.2.3 (git 2.25.1) at 2026-04-18 02:48:23 +0000