├── public
    ├── favicon.ico
    ├── icon-192x192.png
    ├── icon-256x256.png
    ├── icon-384x384.png
    ├── icon-512x512.png
    ├── manifest.json
    ├── vercel.svg
    ├── sw.js
    └── workbox-4a677df8.js
├── pages
    ├── api
    │   ├── items
    │   │   ├── index.js
    │   │   ├── [id].js
    │   │   └── category
    │   │   │   └── [category].js
    │   ├── checkoutsession.js
    │   └── webhook.js
    ├── 404.js
    ├── _app.js
    ├── wishlist.js
    ├── orders.js
    ├── shop
    │   ├── [slug].js
    │   └── index.js
    ├── ourstore.js
    ├── success.js
    ├── _document.js
    ├── index.js
    ├── login.js
    ├── register.js
    ├── basket.js
    └── product
    │   └── [slug].js
├── postcss.config.js
├── components
    ├── cardskeleton.js
    ├── sidecategory.js
    ├── topcategory.js
    ├── shopcarousel.js
    ├── wishproduct.js
    ├── menunav.js
    ├── search.js
    ├── cardprofile.js
    ├── productcard.js
    ├── ordercard.js
    ├── basketproduct.js
    ├── layout.js
    └── header.js
├── next.config.js
├── .gitignore
├── slices
    ├── categorySlice.js
    ├── wishlistSlice.js
    └── basketSlice.js
├── firebase
    └── firebase.js
├── tailwind.config.js
├── app
    ├── store.js
    └── data.json
├── package.json
├── styles
    └── global.css
└── README.md


/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mudzikalfahri/wefootwear-store/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/public/icon-192x192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mudzikalfahri/wefootwear-store/HEAD/public/icon-192x192.png


--------------------------------------------------------------------------------
/public/icon-256x256.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mudzikalfahri/wefootwear-store/HEAD/public/icon-256x256.png


--------------------------------------------------------------------------------
/public/icon-384x384.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mudzikalfahri/wefootwear-store/HEAD/public/icon-384x384.png


--------------------------------------------------------------------------------
/public/icon-512x512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mudzikalfahri/wefootwear-store/HEAD/public/icon-512x512.png


--------------------------------------------------------------------------------
/pages/api/items/index.js:
--------------------------------------------------------------------------------
1 | import data from "../../../app/data.json";
2 | 
3 | export default async (req, res) => {
4 |   res.status(200).json(JSON.stringify(data));
5 | };
6 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | // If you want to use other PostCSS plugins, see the following:
2 | // https://tailwindcss.com/docs/using-with-preprocessors
3 | module.exports = {
4 |   plugins: {
5 |     tailwindcss: {},
6 |     autoprefixer: {},
7 |   },
8 | }
9 | 


--------------------------------------------------------------------------------
/pages/api/items/[id].js:
--------------------------------------------------------------------------------
 1 | import data from "../../../app/data.json";
 2 | 
 3 | export default async (req, res) => {
 4 |   const { id } = req.query;
 5 | 
 6 |   const item = data.find((item) => item.slug === id);
 7 | 
 8 |   res.status(200).json(JSON.stringify(item));
 9 | };
10 | 


--------------------------------------------------------------------------------
/pages/api/items/category/[category].js:
--------------------------------------------------------------------------------
 1 | import data from "../../../../app/data.json";
 2 | 
 3 | export default async (req, res) => {
 4 |   const { category } = req.query;
 5 | 
 6 |   const item = data.filter(
 7 |     (item) => item.category.toLowerCase() === category.toLowerCase()
 8 |   );
 9 | 
10 |   res.status(200).json(JSON.stringify(item));
11 | };
12 | 


--------------------------------------------------------------------------------
/components/cardskeleton.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import Skeleton from "react-loading-skeleton";
 3 | 
 4 | function CardSkeleton() {
 5 |   return (
 6 |     <div>
 7 |       <Skeleton className="h-44 mb-2" />
 8 |       <Skeleton className="h-5 mb-2" />
 9 |       <Skeleton className="h-3 mb-2" />
10 |       <Skeleton className="h-3 mb-2" />
11 |     </div>
12 |   );
13 | }
14 | 
15 | export default CardSkeleton;
16 | 


--------------------------------------------------------------------------------
/next.config.js:
--------------------------------------------------------------------------------
 1 | const withPWA = require("next-pwa");
 2 | module.exports = withPWA({
 3 |   images: {
 4 |     domains: ["i.ibb.co", "ibb.co"],
 5 |   },
 6 |   env: {
 7 |     publishableKey: `${process.env.STRIPE_PUBLIC_KEY}`,
 8 |   },
 9 |   reactStrictMode: true,
10 |   pwa: {
11 |     dest: "public",
12 |     register: true,
13 |     skipWaiting: true,
14 |     disable: process.env.NODE_ENV === "development",
15 |   },
16 | });
17 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # next.js
12 | /.next/
13 | /out/
14 | 
15 | # production
16 | /build
17 | 
18 | # misc
19 | .DS_Store
20 | *.pem
21 | 
22 | # debug
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 | 
27 | # local env files
28 | .env.local
29 | .env.development.local
30 | .env.test.local
31 | .env.production.local
32 | 
33 | # vercel
34 | .vercel


--------------------------------------------------------------------------------
/slices/categorySlice.js:
--------------------------------------------------------------------------------
 1 | import { createSlice } from "@reduxjs/toolkit";
 2 | 
 3 | const initialState = {
 4 |   item: "",
 5 | };
 6 | 
 7 | export const categorySlice = createSlice({
 8 |   name: "category",
 9 |   initialState,
10 |   reducers: {
11 |     selectCategory: (state, action) => {
12 |       state.item = action.payload;
13 |     },
14 |   },
15 | });
16 | 
17 | export const { selectCategory } = categorySlice.actions;
18 | 
19 | export const recentCategory = (state) => state.category.item;
20 | 
21 | export default categorySlice.reducer;
22 | 


--------------------------------------------------------------------------------
/firebase/firebase.js:
--------------------------------------------------------------------------------
 1 | import firebase from "firebase";
 2 | 
 3 | const firebaseConfig = {
 4 |   apiKey: "AIzaSyDXTAaEFtLIR-KDqsH3JVMN7h0q0PSBA_o",
 5 |   authDomain: "wefootwear-68c74.firebaseapp.com",
 6 |   projectId: "wefootwear-68c74",
 7 |   storageBucket: "wefootwear-68c74.appspot.com",
 8 |   messagingSenderId: "543016836920",
 9 |   appId: "1:543016836920:web:d238ef9927ce96bcabebcd",
10 |   measurementId: "G-5Z7SRXD89Z",
11 | };
12 | 
13 | const app = !firebase.apps.length
14 |   ? firebase.initializeApp(firebaseConfig)
15 |   : firebase.app();
16 | 
17 | const db = app.firestore();
18 | 
19 | export default db;
20 | 


--------------------------------------------------------------------------------
/pages/404.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import Head from "next/head";
 3 | function NotFound() {
 4 |   return (
 5 |     <>
 6 |       <Head>
 7 |         <title>wefootwear | 404</title>
 8 |       </Head>
 9 |       <div className="w-full min-h-screen bg-cusgray flex justify-center place-items-center">
10 |         <div className="flex flex-col justify-center place-items-center">
11 |           <h1 className="text-6xl text-cusblack font-bold">404</h1>
12 |           <h1 className="text-xl text-gray-400 font-bold">PAGE NOT FOUND</h1>
13 |         </div>
14 |       </div>
15 |     </>
16 |   );
17 | }
18 | 
19 | export default NotFound;
20 | 


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   mode: "jit",
 3 |   purge: ["./pages/**/*.{js,ts,jsx,tsx}", "./components/**/*.{js,ts,jsx,tsx}"],
 4 |   darkMode: false, // or 'media' or 'class'
 5 |   theme: {
 6 |     extend: {
 7 |       fontFamily: {
 8 |         sans: ["Poppins", "sans-serif"],
 9 |       },
10 |       colors: {
11 |         cusgray: {
12 |           DEFAULT: "#F2F5F6",
13 |         },
14 |         cusblack: {
15 |           DEFAULT: "#383838",
16 |         },
17 |       },
18 |     },
19 |     boxShadow: {
20 |       lg: "0 10px 30px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
21 |     },
22 |   },
23 |   variants: {
24 |     extend: {},
25 |   },
26 |   plugins: [require("@tailwindcss/line-clamp")],
27 | };
28 | 


--------------------------------------------------------------------------------
/pages/_app.js:
--------------------------------------------------------------------------------
 1 | import "tailwindcss/tailwind.css";
 2 | import "../styles/global.css";
 3 | import { AnimatePresence } from "framer-motion";
 4 | import { Provider } from "react-redux";
 5 | import { store } from "../app/store";
 6 | import NProgress from "nprogress";
 7 | import "nprogress/nprogress.css";
 8 | import Router from "next/router";
 9 | NProgress.configure({ showSpinner: false });
10 | Router.events.on("routeChangeStart", () => NProgress.start());
11 | Router.events.on("routeChangeComplete", () => NProgress.done());
12 | Router.events.on("routeChangeError", () => NProgress.done());
13 | 
14 | function MyApp({ Component, pageProps }) {
15 |   return (
16 |     <AnimatePresence>
17 |       <Provider store={store}>
18 |         <Component {...pageProps} />
19 |       </Provider>
20 |     </AnimatePresence>
21 |   );
22 | }
23 | 
24 | export default MyApp;
25 | 


--------------------------------------------------------------------------------
/app/store.js:
--------------------------------------------------------------------------------
 1 | import { configureStore } from "@reduxjs/toolkit";
 2 | import basketReducer from "../slices/basketSlice";
 3 | import categoryReducer from "../slices/categorySlice";
 4 | import wishlistReducer from "../slices/wishlistSlice";
 5 | 
 6 | export const loadState = () => {
 7 |   try {
 8 |     const serializedState = localStorage.getItem("state");
 9 |     if (serializedState === null) {
10 |       return undefined;
11 |     }
12 |     return JSON.parse(serializedState);
13 |   } catch (err) {
14 |     return undefined;
15 |   }
16 | };
17 | 
18 | export const store = configureStore({
19 |   reducer: {
20 |     basket: basketReducer,
21 |     category: categoryReducer,
22 |     wishlist: wishlistReducer,
23 |   },
24 |   preloadedState: loadState(),
25 | });
26 | 
27 | store.subscribe(() => {
28 |   localStorage.setItem("state", JSON.stringify(store.getState()));
29 | });
30 | 


--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "theme_color": "#ffffff",
 3 |     "background_color": "#000000",
 4 |     "display": "standalone",
 5 |     "scope": "/",
 6 |     "start_url": "/",
 7 |     "name": "wefootwear Store",
 8 |     "short_name": "wefootwear",
 9 |     "description": "Shoe store based in indonesia",
10 |     "icons": [
11 |         {
12 |             "src": "/icon-192x192.png",
13 |             "sizes": "192x192",
14 |             "type": "image/png"
15 |         },
16 |         {
17 |             "src": "/icon-256x256.png",
18 |             "sizes": "256x256",
19 |             "type": "image/png"
20 |         },
21 |         {
22 |             "src": "/icon-384x384.png",
23 |             "sizes": "384x384",
24 |             "type": "image/png"
25 |         },
26 |         {
27 |             "src": "/icon-512x512.png",
28 |             "sizes": "512x512",
29 |             "type": "image/png"
30 |         }
31 |     ]
32 | }


--------------------------------------------------------------------------------
/slices/wishlistSlice.js:
--------------------------------------------------------------------------------
 1 | import { createSlice } from "@reduxjs/toolkit";
 2 | 
 3 | const initialState = {
 4 |   wishItems: [],
 5 | };
 6 | 
 7 | export const wishlistSlice = createSlice({
 8 |   name: "wishlist",
 9 |   initialState,
10 |   reducers: {
11 |     addToWishlist: (state, action) => {
12 |       const added = state.wishItems.find(
13 |         (item) => item.id === action.payload.id
14 |       );
15 |       if (added) state.wishItems = [...state.wishItems];
16 |       else state.wishItems = [...state.wishItems, action.payload];
17 |     },
18 |     removeFromWishlist: (state, action) => {
19 |       state.wishItems = state.wishItems.filter(
20 |         (item) => item.id !== action.payload.id
21 |       );
22 |     },
23 |   },
24 | });
25 | 
26 | export const { addToWishlist, removeFromWishlist } = wishlistSlice.actions;
27 | 
28 | // Selectors - This is how we pull information from the Global store slice
29 | export const selectWishItems = (state) => state.wishlist.wishItems;
30 | 
31 | export default wishlistSlice.reducer;
32 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "private": true,
 3 |   "scripts": {
 4 |     "dev": "next dev",
 5 |     "build": "next build",
 6 |     "start": "next start"
 7 |   },
 8 |   "dependencies": {
 9 |     "@reduxjs/toolkit": "^1.6.1",
10 |     "@stripe/stripe-js": "^1.17.1",
11 |     "@tailwindcss/line-clamp": "^0.2.1",
12 |     "axios": "^0.21.1",
13 |     "firebase": "^8.6.8",
14 |     "firebase-admin": "^9.11.1",
15 |     "framer-motion": "^4.1.17",
16 |     "micro": "^9.3.4",
17 |     "moment": "^2.29.1",
18 |     "next": "latest",
19 |     "next-pwa": "^5.4.0",
20 |     "nookies": "^2.5.2",
21 |     "nprogress": "^0.2.0",
22 |     "react": "^17.0.2",
23 |     "react-dom": "^17.0.2",
24 |     "react-loading-skeleton": "^2.2.0",
25 |     "react-nprogress": "^0.1.6",
26 |     "react-number-format": "^4.7.3",
27 |     "react-redux": "^7.2.4",
28 |     "react-responsive-carousel": "^3.2.20",
29 |     "stripe": "^8.172.0"
30 |   },
31 |   "devDependencies": {
32 |     "autoprefixer": "^10.2.6",
33 |     "postcss": "^8.3.5",
34 |     "tailwindcss": "^2.2.4"
35 |   }
36 | }
37 | 


--------------------------------------------------------------------------------
/public/vercel.svg:
--------------------------------------------------------------------------------
1 | <svg width="283" height="64" viewBox="0 0 283 64" fill="none" 
2 |     xmlns="http://www.w3.org/2000/svg">
3 |     <path d="M141.04 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.46 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM248.72 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.45 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM200.24 34c0 6 3.92 10 10 10 4.12 0 7.21-1.87 8.8-4.92l7.68 4.43c-3.18 5.3-9.14 8.49-16.48 8.49-11.05 0-19-7.2-19-18s7.96-18 19-18c7.34 0 13.29 3.19 16.48 8.49l-7.68 4.43c-1.59-3.05-4.68-4.92-8.8-4.92-6.07 0-10 4-10 10zm82.48-29v46h-9V5h9zM36.95 0L73.9 64H0L36.95 0zm92.38 5l-27.71 48L73.91 5H84.3l17.32 30 17.32-30h10.39zm58.91 12v9.69c-1-.29-2.06-.49-3.2-.49-5.81 0-10 4-10 10V51h-9V17h9v9.2c0-5.08 5.91-9.2 13.2-9.2z" fill="#000"/>
4 | </svg>


--------------------------------------------------------------------------------
/styles/global.css:
--------------------------------------------------------------------------------
 1 | @tailwind base;
 2 | @tailwind components;
 3 | @tailwind utilities;
 4 | 
 5 | #nprogress .bar {
 6 |   background: #383838 !important;
 7 | }
 8 | 
 9 | #nprogress .peg {
10 |   box-shadow: 0 0 10px #383838, 0 0 5px #383838 !important;
11 | }
12 | 
13 | #nprogress .spinner-icon {
14 |   border-top-color: #383838;
15 |   border-left-color: #383838;
16 | }
17 | 
18 | .shop .carousel .control-dots {
19 |   top: 0px !important;
20 |   text-align: left;
21 |   padding-left: 10px !important;
22 | }
23 | 
24 | .dot {
25 |   box-shadow: none !important;
26 |   background: gray !important;
27 | }
28 | 
29 | .dot:hover {
30 |   background: black !important;
31 | }
32 | 
33 | .selected {
34 |   background: black !important;
35 | }
36 | 
37 | /* width */
38 | ::-webkit-scrollbar {
39 |   width: 15px;
40 | }
41 | 
42 | /* Track */
43 | ::-webkit-scrollbar-track {
44 |   background: #f1f1f1;
45 | }
46 | 
47 | /* Handle */
48 | ::-webkit-scrollbar-thumb {
49 |   background: #888;
50 |   border: 4px solid transparent;
51 |   border-radius: 8px;
52 |   background-clip: padding-box;
53 | }
54 | 
55 | /* Handle on hover */
56 | ::-webkit-scrollbar-thumb:hover {
57 |   background: #888;
58 | }
59 | 


--------------------------------------------------------------------------------
/pages/api/checkoutsession.js:
--------------------------------------------------------------------------------
 1 | const stripe = require("stripe")(process.env.STRIPE_SECRET_KEY);
 2 | 
 3 | export default async (req, res) => {
 4 |   const { items, email } = req.body;
 5 | 
 6 |   const transformedItems = items.map((item) => ({
 7 |     description: `${item.name} - ${item.selectedSizeProp}`,
 8 |     quantity: item.quantity,
 9 |     price_data: {
10 |       currency: "sgd",
11 |       unit_amount: Math.round((item.price / 10000) * 100),
12 |       product_data: {
13 |         name: item.name,
14 |         images: [item.prop[0].image[0]],
15 |       },
16 |     },
17 |   }));
18 | 
19 |   const session = await stripe.checkout.sessions.create({
20 |     payment_method_types: ["card"],
21 |     shipping_rates: ["shr_1JUuWyLGtksRU8sW7GevYwRT"],
22 |     shipping_address_collection: {
23 |       allowed_countries: ["SG", "MY"],
24 |     },
25 |     line_items: transformedItems,
26 |     mode: "payment",
27 |     success_url: `${process.env.HOST}/success`,
28 |     cancel_url: `${process.env.HOST}/basket`,
29 |     metadata: {
30 |       email,
31 |       images: JSON.stringify(items.map((item) => item.prop[0].image[0])),
32 |     },
33 |   });
34 | 
35 |   res.status(200).json({ id: session.id });
36 | };
37 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # WEFOOTWEAR STORE
 2 | 
 3 | ### Full Stack E-commerce Website for Footwear Store.
 4 | 
 5 | ![Thumbnail](https://i.ibb.co/bLb6DpL/wefootwear-ss-min.jpg)
 6 | 
 7 | ## About The Project
 8 | 
 9 | **Wefootwear E-commerce** is an example online shop built with Next js.
10 | [demo](https://wefootwear.vercel.app/)
11 | 
12 | ## Stacks
13 | 
14 | - [Next js](https://nextjs.org/) (React Framework)
15 | - [React](reactjs.org)
16 | - [TailwindCSS](https://tailwindcss.com/)
17 | - [Strapi CMS](https://strapi.io/)
18 | - [MongoDB](https://www.mongodb.com/cloud/atlas)
19 | - [Stripe](https://stripe.com)
20 | - [Redux Toolkit](https://redux-toolkit.js.org/)
21 | - Vercel (deployment)
22 | 
23 | **Some features**:
24 | 
25 | - Sign up and sign In authentication
26 | - Incremental Static Regeneration on product page
27 | - Add or remove product from basket or wishlist page
28 | - Search products by category
29 | - Live search product
30 | - stripe for processing the payment (test mode) 
31 | (use card number: 4242 4242 4242 4242 to complete the payment)
32 | - order page to display successful order
33 | 
34 | ### Clone Repository
35 | 
36 | ```
37 | git clone https://github.com/mudzikalfahri/wefootwear-ecommerce.git
38 | ```
39 | 
40 | #### Add .env.local file to root client directory
41 | 
42 | ```
43 | NEXT_PUBLIC_APIURL
44 | STRIPE_SIGNING_SECRET
45 | HOST
46 | STRIPE_SECRET_KEY
47 | STRIPE_PUBLIC_KEY
48 | ```
49 | 


--------------------------------------------------------------------------------
/components/sidecategory.js:
--------------------------------------------------------------------------------
 1 | import React, { useEffect, useState } from "react";
 2 | import { useDispatch, useSelector } from "react-redux";
 3 | import { recentCategory, selectCategory } from "../slices/categorySlice";
 4 | 
 5 | function SideCategory({ typesData }) {
 6 |   const dispatch = useDispatch();
 7 |   const data = useSelector(recentCategory);
 8 |   const [recent, setRecent] = useState();
 9 |   useEffect(() => setRecent(data));
10 |   return (
11 |     <div className="bg-white rounded-3xl px-5 py-6 shadow-lg w-2/3 md:w-1/2 lg:w-auto">
12 |       <h3 className="font-semibold mb-3 text-lg text-cusblack">Categories</h3>
13 |       <ul className="leading-10 text-xs text-gray-400">
14 |         <li>
15 |           <button
16 |             className={`${
17 |               recent == "" ? `font-semibold text-cusblack` : ``
18 |             } cursor-pointer`}
19 |             onClick={() => dispatch(selectCategory(""))}
20 |           >
21 |             All products
22 |           </button>
23 |         </li>
24 |         {typesData.map((type, idx) => (
25 |           <li key={type.slug}>
26 |             <button
27 |               className={`${
28 |                 recent == type.name ? `font-semibold text-cusblack` : ``
29 |               } cursor-pointer`}
30 |               onClick={() => dispatch(selectCategory(type.name))}
31 |             >
32 |               {type.name}
33 |             </button>
34 |           </li>
35 |         ))}
36 |       </ul>
37 |     </div>
38 |   );
39 | }
40 | 
41 | export default SideCategory;
42 | 


--------------------------------------------------------------------------------
/components/topcategory.js:
--------------------------------------------------------------------------------
 1 | import React, { useEffect, useState } from "react";
 2 | import Link from "next/link";
 3 | import { useRouter } from "next/dist/client/router";
 4 | import Search from "./search";
 5 | 
 6 | function TopCategory({ categories }) {
 7 |   const { asPath } = useRouter();
 8 |   useEffect(() => {
 9 |     setIsActive(asPath);
10 |   }, [asPath]);
11 | 
12 |   const [isActive, setIsActive] = useState("/shop");
13 |   return (
14 |     <div className="navbot bg-cusgray z-30 w-full px-1 md:px-0">
15 |       <div className=" mx-auto md:flex place-items-center max-w-6xl">
16 |         <div className="category overflow-x-auto flex flex-wrap place-items-center py-2">
17 |           <Link key="all" href={`/shop`}>
18 |             <button
19 |               className={`${
20 |                 isActive == `/shop`
21 |                   ? `bg-cusblack text-white shadow-lg `
22 |                   : `bg-white text-cusblack`
23 |               } py-2.5 px-6 rounded-3xl text-xs mr-3 mb-2 md:mb-0`}
24 |             >
25 |               All items
26 |             </button>
27 |           </Link>
28 |           {categories.map((cat, idx) => (
29 |             <Link key={cat.slug} href={`/shop/${cat.slug}`}>
30 |               <button
31 |                 className={`${
32 |                   isActive == `/shop/${cat.slug}`
33 |                     ? `bg-cusblack text-white shadow-lg `
34 |                     : `bg-white text-cusblack`
35 |                 } py-2.5 px-6 rounded-3xl text-xs mr-3 mb-2 md:mb-0`}
36 |               >
37 |                 {cat.name}
38 |               </button>
39 |             </Link>
40 |           ))}
41 |         </div>
42 |         <Search />
43 |       </div>
44 |     </div>
45 |   );
46 | }
47 | 
48 | export default TopCategory;
49 | 


--------------------------------------------------------------------------------
/components/shopcarousel.js:
--------------------------------------------------------------------------------
 1 | import React, { useEffect, useState } from "react";
 2 | import Skeleton from "react-loading-skeleton";
 3 | import { Carousel } from "react-responsive-carousel";
 4 | import "react-responsive-carousel/lib/styles/carousel.min.css";
 5 | 
 6 | function ShopCarousel() {
 7 |   const [loading, setLoading] = useState(true);
 8 | 
 9 |   useEffect(() => {
10 |     setTimeout(() => setLoading(false), 1000);
11 |   }, []);
12 | 
13 |   if (loading) return <Skeleton className="h-24 md:h-64" />;
14 |   return (
15 |     <div className="">
16 |       <Carousel
17 |         autoPlay
18 |         infiniteLoop
19 |         showStatus={false}
20 |         showArrows={false}
21 |         showThumbs={false}
22 |         swipeable={true}
23 |         transitionTime={500}
24 |         interval={4000}
25 |         className="rounded-2xl overflow-hidden shop shadow-lg"
26 |       >
27 |         <div className="relative">
28 |           <img
29 |             className=" bg-white h-24 object-cover md:h-64 w-full pointer-events-none"
30 |             loading="lazy"
31 |             src="https://i.ibb.co/TYNgNgp/Homepage-Banner-AF1-React-170120.jpg"
32 |           />
33 |         </div>
34 |         <div>
35 |           <img
36 |             className=" bg-white h-24 object-cover md:h-64 w-full"
37 |             loading="lazy"
38 |             src="https://i.ibb.co/kHhhbbG/adidas-banner-grpn-US.jpg"
39 |           />
40 |         </div>
41 |         <div>
42 |           <img
43 |             className=" bg-white h-24 object-cover md:h-64 w-full"
44 |             loading="lazy"
45 |             src="https://i.ibb.co/WvN6bC5/PLPBanner-Converse-1920x700.png"
46 |           />
47 |         </div>
48 |       </Carousel>
49 |     </div>
50 |   );
51 | }
52 | 
53 | export default ShopCarousel;
54 | 


--------------------------------------------------------------------------------
/slices/basketSlice.js:
--------------------------------------------------------------------------------
 1 | import { createSlice } from "@reduxjs/toolkit";
 2 | 
 3 | const initialState = {
 4 |   items: [],
 5 | };
 6 | 
 7 | export const addItemToCart = (cartItems, cartItemToAdd) => {
 8 |   const existingCartItem = cartItems.find(
 9 |     (cartItem) => cartItem.id === cartItemToAdd.id
10 |   );
11 | 
12 |   if (existingCartItem) {
13 |     return cartItems.map((cartItem) =>
14 |       cartItem.id === cartItemToAdd.id
15 |         ? { ...cartItem, quantity: cartItem.quantity + 1 }
16 |         : cartItem
17 |     );
18 |   }
19 | 
20 |   return [...cartItems, { ...cartItemToAdd, quantity: 1 }];
21 | };
22 | 
23 | export const basketSlice = createSlice({
24 |   name: "basket",
25 |   initialState,
26 |   hydrate: (state, action) => {
27 |     // do not do state = action.payload it will not update the store
28 |     return action.payload;
29 |   },
30 |   reducers: {
31 |     addToBasket: (state, action) => {
32 |       state.items = addItemToCart(state.items, action.payload);
33 |     },
34 |     removeFromBasket: (state, action) => {
35 |       state.items = state.items.filter((item) => item.id !== action.payload.id);
36 |     },
37 |     plusItem: (state, action) => {
38 |       [...state.items, (state.items[action.payload].quantity += 1)];
39 |     },
40 |     minusItem: (state, action) => {
41 |       [...state.items, (state.items[action.payload].quantity -= 1)];
42 |     },
43 |     deleteFromBasket: (state, action) => {
44 |       state.items = [];
45 |     },
46 |   },
47 | });
48 | 
49 | export const {
50 |   addToBasket,
51 |   removeFromBasket,
52 |   plusItem,
53 |   minusItem,
54 |   deleteFromBasket,
55 | } = basketSlice.actions;
56 | 
57 | // Selectors - This is how we pull information from the Global store slice
58 | export const selectItems = (state) => state.basket.items;
59 | 
60 | export default basketSlice.reducer;
61 | 


--------------------------------------------------------------------------------
/components/wishproduct.js:
--------------------------------------------------------------------------------
 1 | import Link from "next/link";
 2 | import React from "react";
 3 | import NumberFormat from "react-number-format";
 4 | import { useDispatch } from "react-redux";
 5 | import { removeFromWishlist } from "../slices/wishlistSlice";
 6 | import { motion } from "framer-motion";
 7 | 
 8 | function WishProduct({ item, idx }) {
 9 |   const dispatch = useDispatch();
10 |   return (
11 |     <div className="mb-4 overflow-hidden">
12 |       <motion.div
13 |         initial={{ scale: 1.5, x: 100, y: -100, opacity: 0 }}
14 |         animate={{ scale: 1, x: 0, y: 0, opacity: 1 }}
15 |       >
16 |         <img
17 |           className="h-28 rounded-lg object-cover w-full"
18 |           src={item.prop[0].image[0]}
19 |           alt=""
20 |         />
21 |       </motion.div>
22 |       <div className="px-2 py-1 text-cusblack">
23 |         <p className="text-sm line-clamp-1">{item.name}</p>
24 |         <NumberFormat
25 |           value={item.price}
26 |           className="text-xs my-1.5"
27 |           displayType={"text"}
28 |           thousandSeparator={true}
29 |           prefix={"Rp"}
30 |           renderText={(value, props) => (
31 |             <p className="text-xs my-1.5" {...props}>
32 |               {value}
33 |             </p>
34 |           )}
35 |         />
36 |         <Link href={"/product/" + item.slug}>
37 |           <button className="text-white bg-cusblack border border-cusblack py-1 text-xs w-full rounded-lg">
38 |             View product
39 |           </button>
40 |         </Link>
41 |         <button
42 |           onClick={() => dispatch(removeFromWishlist(item))}
43 |           className="text-cusblack mt-1.5 bg-white border border-cusblack py-1 text-xs w-full rounded-lg"
44 |         >
45 |           Remove
46 |         </button>
47 |       </div>
48 |     </div>
49 |   );
50 | }
51 | 
52 | export default WishProduct;
53 | 


--------------------------------------------------------------------------------
/components/menunav.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { motion } from "framer-motion";
 3 | import Link from "next/link";
 4 | 
 5 | function MenuNav({ handleOpen, isOpen }) {
 6 |   if (!isOpen) return <div></div>;
 7 |   return (
 8 |     <motion.div
 9 |       initial={{ opacity: 0 }}
10 |       animate={{ opacity: 1 }}
11 |       exit={{ opacity: 0 }}
12 |       transition={{ duration: 0.2 }}
13 |       className={`${
14 |         !isOpen ? `hidden` : `flex`
15 |       } w-full h-screen absolute top-0 bg-gray-700 bg-opacity-30`}
16 |     >
17 |       <div className="text-center relative leading-loose flex place-items-center text-md text-cusblack w-52 h-screen bg-white">
18 |         <button onClick={handleOpen} className=" absolute top-0 right-0 m-5">
19 |           <svg
20 |             className="w-6 h-6"
21 |             fill="none"
22 |             stroke="currentColor"
23 |             viewBox="0 0 24 24"
24 |             xmlns="http://www.w3.org/2000/svg"
25 |           >
26 |             <path
27 |               strokeLinecap="round"
28 |               strokeLinejoin="round"
29 |               strokeWidth={2}
30 |               d="M6 18L18 6M6 6l12 12"
31 |             />
32 |           </svg>
33 |         </button>
34 |         <ul className="w-full">
35 |           <Link href="/">
36 |             <li className="mb-2 hover:underline mx-4 rounded-xl cursor-pointer">
37 |               Home
38 |             </li>
39 |           </Link>
40 |           <Link href="/shop">
41 |             <li className="mb-2 hover:underline mx-4 rounded-xl cursor-pointer">
42 |               Shop
43 |             </li>
44 |           </Link>
45 |           <Link href="/ourstore">
46 |             <li className="mb-2 hover:underline mx-4 rounded-xl cursor-pointer">
47 |               About
48 |             </li>
49 |           </Link>
50 |           <Link href="/ourstore">
51 |             <li className="mb-2 hover:underline mx-4 rounded-xl cursor-pointer">
52 |               Our Store
53 |             </li>
54 |           </Link>
55 |         </ul>
56 |       </div>
57 |     </motion.div>
58 |   );
59 | }
60 | 
61 | export default MenuNav;
62 | 


--------------------------------------------------------------------------------
/pages/wishlist.js:
--------------------------------------------------------------------------------
 1 | import React, { useEffect, useState } from "react";
 2 | import { useSelector } from "react-redux";
 3 | import Header from "../components/header";
 4 | import WishProduct from "../components/wishproduct";
 5 | import { selectWishItems } from "../slices/wishlistSlice";
 6 | import Head from "next/head";
 7 | 
 8 | function WishList() {
 9 |   const data = useSelector(selectWishItems);
10 |   const [items, setItems] = useState([]);
11 |   useEffect(() => {
12 |     setItems(data);
13 |   });
14 |   return (
15 |     <>
16 |       <Head>
17 |         <title>wefootwear | Wishlist</title>
18 |       </Head>
19 |       <div className="w-full min-h-screen relative bg-cusgray pb-10">
20 |         <Header />
21 |         <div className="max-w-6xl mx-auto pt-20 px-5 min-h-screen">
22 |           <div className="bg-white rounded-xl shadow-lg grid grid-cols-1 md:grid-cols-3 md:py-6 md:px-6 pb-3">
23 |             <div className="col-span-2 grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-x-4 gap-y-2 px-4 md:px-0">
24 |               {items.length > 0 ? (
25 |                 items.map((item, idx) => (
26 |                   <WishProduct item={item} key={item.slug} idx={idx} />
27 |                 ))
28 |               ) : (
29 |                 <div className="text-sm text-gray-400 col-span-2 md:col-span-3 lg:col-span-4 flex justify-center place-items-center">
30 |                   Your wishlist is empty
31 |                 </div>
32 |               )}
33 |             </div>
34 | 
35 |             <div className="overflow-hidden md:pl-10 row-start-1 md:col-start-3 mb-6 md:mb-0 h-48 md:h-full">
36 |               <div className="relative">
37 |                 <div className="text-white flex justify-center place-items-center text-2xl absolute w-full rounded-xl bg-gray-600 ml-10 bg-opacity-60 font-bold right-0 top-0 h-48 md:h-full">
38 |                   <h1>WISHLIST</h1>
39 |                 </div>
40 |                 <img
41 |                   src="https://i.ibb.co/N23Cxhz/8b683a2f7a998bdd6df80046dc1f5292.jpg"
42 |                   className="object-cover rounded-xl w-full"
43 |                   alt=""
44 |                 />
45 |               </div>
46 |             </div>
47 |           </div>
48 |         </div>
49 |       </div>
50 |     </>
51 |   );
52 | }
53 | 
54 | export default WishList;
55 | 


--------------------------------------------------------------------------------
/components/search.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { useState } from "react";
 3 | import Router from "next/router";
 4 | 
 5 | function Search() {
 6 |   const [input, setInput] = useState("");
 7 |   const [data, setData] = useState([]);
 8 |   const handleChange = async (e) => {
 9 |     setInput(e.target.value);
10 |     const res = await fetch(
11 |       `${process.env.NEXT_PUBLIC_APIURL}/items?name_contains=${input}`
12 |     );
13 |     const data = await res.json();
14 |     setData(data);
15 |   };
16 |   return (
17 |     <div className="flex relative group md:ml-auto justify-between pr-4 place-items-center flex-grow h-full rounded-3xl bg-white">
18 |       <input
19 |         onChange={handleChange}
20 |         className="text-xs group pl-4 rounded-3xl p-2.5 focus:outline-none w-full text-cusblack"
21 |         type="text"
22 |         placeholder="Search product"
23 |       />
24 |       <div className="p-5 shadow-lg hidden duration-100 group-focus-within:inline group-active:inline top-11 bg-white absolute rounded-2xl w-full z-20">
25 |         {data.length ? (
26 |           data
27 |             .filter((i, idx) => idx < 4)
28 |             .map((item, idx) => (
29 |               <div onClick={() => Router.push("/product/" + item.slug)}>
30 |                 <div
31 |                   key={idx}
32 |                   className="p-2 flex place-items-center cursor-pointer text-xs font-light text-cusblack hover:bg-gray-100 active:bg-gray-200"
33 |                 >
34 |                   <span>
35 |                     <img
36 |                       src={item.prop[0].image[0]}
37 |                       className="w-7 h-7 mr-1 rounded-lg"
38 |                       alt=""
39 |                     />
40 |                   </span>
41 |                   {item.name}
42 |                 </div>
43 |               </div>
44 |             ))
45 |         ) : (
46 |           <p className="text-xs text-cusblack font-light">No item found</p>
47 |         )}
48 |       </div>
49 |       <svg
50 |         className="w-4 h-4 text-gray-400"
51 |         fill="currentColor"
52 |         viewBox="0 0 20 20"
53 |         xmlns="http://www.w3.org/2000/svg"
54 |       >
55 |         <path
56 |           fillRule="evenodd"
57 |           d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
58 |           clipRule="evenodd"
59 |         />
60 |       </svg>
61 |     </div>
62 |   );
63 | }
64 | 
65 | export default Search;
66 | 


--------------------------------------------------------------------------------
/pages/orders.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import nookies from "nookies";
 3 | import db from "../firebase/firebase";
 4 | import moment from "moment";
 5 | import Head from "next/head";
 6 | import Header from "../components/header";
 7 | import CardProfile from "../components/cardprofile";
 8 | import OrderCard from "../components/ordercard";
 9 | 
10 | export async function getServerSideProps(ctx) {
11 |   const stripe = require("stripe")(process.env.STRIPE_SECRET_KEY);
12 |   const cookie = nookies.get(ctx, "user").user;
13 |   let session = null;
14 |   if (cookie) {
15 |     session = JSON.parse(cookie);
16 |   }
17 | 
18 |   if (!cookie) {
19 |     return {
20 |       redirect: {
21 |         destination: "/login",
22 |         permanent: false,
23 |       },
24 |     };
25 |   }
26 | 
27 |   const stripeOrders = await db
28 |     .collection("users")
29 |     .doc(session.email)
30 |     .collection("orders")
31 |     .orderBy("timestamp", "desc")
32 |     .get();
33 | 
34 |   const orders = await Promise.all(
35 |     stripeOrders.docs.map(async (order) => ({
36 |       id: order.id,
37 |       amount: order.data().amount,
38 |       amountShipping: order.data().amount_shipping,
39 |       images: order.data().images,
40 |       timestamp: moment(order.data().timestamp.toDate()).unix(),
41 |       items: (
42 |         await stripe.checkout.sessions.listLineItems(order.id, {
43 |           limit: 100,
44 |         })
45 |       ).data,
46 |     }))
47 |   );
48 | 
49 |   return {
50 |     props: {
51 |       orders,
52 |       session,
53 |     },
54 |   };
55 | }
56 | 
57 | function Order({ orders, session }) {
58 |   return (
59 |     <>
60 |       <Head>
61 |         <title>wefootwear | Orders</title>
62 |       </Head>
63 |       <div className="w-full min-h-screen relative bg-cusgray pb-10">
64 |         <Header />
65 |         <div className="max-w-6xl mx-auto pt-20 px-5 grid grid-cols-1 md:grid-cols-4">
66 |           <div className="col-span-1 mb-7">
67 |             <CardProfile session={session} orders={orders} />
68 |           </div>
69 |           <div className="col-span-3 md:ml-10 rounded-2xl px-8 py-6 bg-white shadow-lg">
70 |             <h1 className="mb-4">Your Orders ({orders.length})</h1>
71 |             <div className="container">
72 |               {orders?.map((order, idx) => (
73 |                 <OrderCard key={idx} order={order} />
74 |               ))}
75 |             </div>
76 |           </div>
77 |         </div>
78 |       </div>
79 |     </>
80 |   );
81 | }
82 | 
83 | export default Order;
84 | 


--------------------------------------------------------------------------------
/components/cardprofile.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import NumberFormat from "react-number-format";
 3 | 
 4 | function CardProfile({ session, orders }) {
 5 |   return (
 6 |     <div className="rounded-2xl p-5 bg-white shadow-lg">
 7 |       <div className="flex flex-col place-items-center pb-3 border-b border-gray-300">
 8 |         <div className="w-14 h-14 rounded-full bg-cusblack mb-2"></div>
 9 |         <div className="text-center">
10 |           <p className="mb-1">{session.username}</p>
11 |           <p className="text-xs text-gray-400 mb-1">Verified Account</p>
12 |           <p className="text-xs text-gray-400">{session.email}</p>
13 |         </div>
14 |       </div>
15 |       <div className="py-3 flex flex-col place-items-center">
16 |         <div className="flex place-items-center mb-2 font-semibold">
17 |           <svg
18 |             className="w-4 h-4 text-cusblack mr-1"
19 |             fill="none"
20 |             stroke="currentColor"
21 |             viewBox="0 0 24 24"
22 |             xmlns="http://www.w3.org/2000/svg"
23 |           >
24 |             <path
25 |               strokeLinecap="round"
26 |               strokeLinejoin="round"
27 |               strokeWidth={2}
28 |               d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4"
29 |             />
30 |           </svg>
31 |           <p className="text-xs text-cusblack">Member+</p>
32 |         </div>
33 |         <div className="text-center text-xs mb-2">
34 |           <p className="text-cusblack mb-1">Payment succeeded :</p>
35 |           <p className="text-gray-400">{orders.length} times</p>
36 |         </div>
37 |         <div className="text-center text-xs">
38 |           <p className="text-cusblack mb-1">Money Spent :</p>
39 |           <NumberFormat
40 |             value={orders.reduce(
41 |               (val, order) =>
42 |                 val +
43 |                 order.items.reduce((v, i) => v + i.amount_subtotal * 100, 0),
44 |               0
45 |             )}
46 |             className="text-gray-400 text-xs"
47 |             displayType={"text"}
48 |             thousandSeparator={true}
49 |             prefix={"Rp"}
50 |             renderText={(value, props) => (
51 |               <p className="text-gray-400 text-xs" {...props}>
52 |                 {value}
53 |               </p>
54 |             )}
55 |           />
56 |         </div>
57 |       </div>
58 |     </div>
59 |   );
60 | }
61 | 
62 | export default CardProfile;
63 | 


--------------------------------------------------------------------------------
/pages/api/webhook.js:
--------------------------------------------------------------------------------
 1 | import { buffer } from "micro";
 2 | import * as admin from "firebase-admin";
 3 | 
 4 | const serviceAccount = {
 5 |   type: "service_account",
 6 |   project_id: "wefootwear-68c74",
 7 |   private_key_id: "c488eca553c6d0096e5872067aff467e1bb55b2b",
 8 |   private_key: process.env.NEXT_PUBLIC_FIREBASE_SECRET,
 9 |   client_email:
10 |     "firebase-adminsdk-g779b@wefootwear-68c74.iam.gserviceaccount.com",
11 |   client_id: "115524336642708944609",
12 |   auth_uri: "https://accounts.google.com/o/oauth2/auth",
13 |   token_uri: "https://oauth2.googleapis.com/token",
14 |   auth_provider_x509_cert_url: "https://www.googleapis.com/oauth2/v1/certs",
15 |   client_x509_cert_url:
16 |     "https://www.googleapis.com/robot/v1/metadata/x509/firebase-adminsdk-g779b%40wefootwear-68c74.iam.gserviceaccount.com",
17 | };
18 | 
19 | const app = !admin.apps.length
20 |   ? admin.initializeApp({
21 |       credential: admin.credential.cert(serviceAccount),
22 |     })
23 |   : admin.app();
24 | 
25 | const stripe = require("stripe")(process.env.STRIPE_SECRET_KEY);
26 | 
27 | const endpointSecret = process.env.STRIPE_SIGNING_SECRET;
28 | 
29 | const fulfillOrder = async (session) => {
30 |   return app
31 |     .firestore()
32 |     .collection("users")
33 |     .doc(session.metadata.email)
34 |     .collection("orders")
35 |     .doc(session.id)
36 |     .set({
37 |       amount: (session.amount_total / 100) * 10000,
38 |       amount_shipping: (session.total_details.amount_shipping / 100) * 10000,
39 |       images: JSON.parse(session.metadata.images),
40 |       timestamp: admin.firestore.FieldValue.serverTimestamp(),
41 |     })
42 |     .then(console.log(`Order Success ${session.id}`));
43 | };
44 | export default async (req, res) => {
45 |   if (req.method === "POST") {
46 |     const requestBuffer = await buffer(req);
47 |     const payload = requestBuffer.toString();
48 |     const sig = req.headers["stripe-signature"];
49 |     let event;
50 |     try {
51 |       event = stripe.webhooks.constructEvent(payload, sig, endpointSecret);
52 |     } catch (err) {
53 |       console.log("error");
54 |       return res.status(400).send("error");
55 |     }
56 |     if (event.type === "checkout.session.completed") {
57 |       const session = event.data.object;
58 |       return fulfillOrder(session)
59 |         .then(() => res.status(200))
60 |         .catch((err) => res.status(400).send("webhook error" + err.message));
61 |     }
62 |   }
63 | };
64 | 
65 | export const config = {
66 |   api: {
67 |     bodyParser: false,
68 |     externalResolver: true,
69 |   },
70 | };
71 | 


--------------------------------------------------------------------------------
/pages/shop/[slug].js:
--------------------------------------------------------------------------------
 1 | import React, { useEffect, useState } from "react";
 2 | import { useSelector } from "react-redux";
 3 | import CardSkeleton from "../../components/cardskeleton";
 4 | import Layout from "../../components/layout";
 5 | import ProductCard from "../../components/productcard";
 6 | import { recentCategory } from "../../slices/categorySlice";
 7 | import Head from "next/head";
 8 | 
 9 | export async function getStaticProps({ params }) {
10 |   const { slug } = params;
11 |   const res = await fetch(process.env.NEXT_PUBLIC_APIURL + "/categories");
12 |   const data = await res.json();
13 |   const resTypes = await fetch(process.env.NEXT_PUBLIC_APIURL + "/types");
14 |   const dataTypes = await resTypes.json();
15 |   const resItems = await fetch(
16 |     process.env.NEXT_PUBLIC_APIURL +
17 |       `/items?category.slug=${slug}&_sort=published_at:DESC`
18 |   );
19 |   const dataItems = await resItems.json();
20 | 
21 |   return {
22 |     props: {
23 |       data,
24 |       dataItems,
25 |       dataTypes,
26 |     },
27 |     revalidate: 5,
28 |   };
29 | }
30 | 
31 | export async function getStaticPaths() {
32 |   const res = await fetch(process.env.NEXT_PUBLIC_APIURL + "/categories");
33 |   const data = await res.json();
34 | 
35 |   const paths = data.map((cat) => ({
36 |     params: { slug: cat.slug },
37 |   }));
38 | 
39 |   return {
40 |     paths,
41 |     fallback: false,
42 |   };
43 | }
44 | 
45 | function Category({ data, dataItems, dataTypes }) {
46 |   const [sort, setSort] = useState(0);
47 |   const recent_category = useSelector(recentCategory);
48 |   const data_items = dataItems
49 |     .filter((item) => {
50 |       if (recent_category.length > 0) {
51 |         return item.type.name == recent_category;
52 |       } else {
53 |         return true;
54 |       }
55 |     })
56 |     .sort((a, b) => {
57 |       if (sort === 1) {
58 |         return a.price - b.price;
59 |       }
60 |       if (sort === 2) {
61 |         return b.price - a.price;
62 |       }
63 |       return true;
64 |     });
65 | 
66 |   return (
67 |     <>
68 |       <Head>
69 |         <title>wefootwear | Shop</title>
70 |       </Head>
71 |       <Layout categories={data} setSort={setSort} types={dataTypes}>
72 |         {data_items.length > 0 ? (
73 |           data_items.map((item) => <ProductCard key={item.slug} item={item} />)
74 |         ) : (
75 |           <p className="col-span-full mx-auto my-10 text-sm text-gray-400">
76 |             No item found
77 |           </p>
78 |         )}
79 |       </Layout>
80 |     </>
81 |   );
82 | }
83 | 
84 | export default Category;
85 | 


--------------------------------------------------------------------------------
/pages/shop/index.js:
--------------------------------------------------------------------------------
 1 | import React, { useEffect, useState } from "react";
 2 | import CardSkeleton from "../../components/cardskeleton";
 3 | import Layout from "../../components/layout";
 4 | import ProductCard from "../../components/productcard";
 5 | import { useSelector } from "react-redux";
 6 | import { recentCategory } from "../../slices/categorySlice";
 7 | import Head from "next/head";
 8 | 
 9 | export async function getStaticProps() {
10 |   const res = await fetch(process.env.NEXT_PUBLIC_APIURL + "/categories");
11 |   const data = await res.json();
12 |   const resTypes = await fetch(process.env.NEXT_PUBLIC_APIURL + "/types");
13 |   const dataTypes = await resTypes.json();
14 |   const resItems = await fetch(
15 |     process.env.NEXT_PUBLIC_APIURL + `/items?_sort=published_at:DESC`
16 |   );
17 |   const dataItems = await resItems.json();
18 | 
19 |   return {
20 |     props: {
21 |       data,
22 |       dataItems,
23 |       dataTypes,
24 |     },
25 |     revalidate: 5,
26 |   };
27 | }
28 | 
29 | function Category({ data, dataItems, dataTypes }) {
30 |   const [sort, setSort] = useState(0);
31 |   const recent_category = useSelector(recentCategory);
32 |   const data_items = dataItems
33 |     .filter((item) => {
34 |       if (recent_category.length > 0) {
35 |         return item.type.name == recent_category;
36 |       } else {
37 |         return true;
38 |       }
39 |     })
40 |     .sort((a, b) => {
41 |       if (sort === 1) {
42 |         return a.price - b.price;
43 |       }
44 |       if (sort === 2) {
45 |         return b.price - a.price;
46 |       }
47 |       return true;
48 |     });
49 | 
50 |   const [loading, setLoading] = useState(true);
51 | 
52 |   useEffect(() => {
53 |     setTimeout(() => setLoading(false), 1000);
54 |   }, []);
55 | 
56 |   return (
57 |     <>
58 |       <Head>
59 |         <title>wefootwear | Shop</title>
60 |       </Head>
61 |       <Layout categories={data} setSort={setSort} types={dataTypes}>
62 |         {!loading ? (
63 |           data_items.length < 1 ? (
64 |             <p className="col-span-full mx-auto text-sm text-gray-400">
65 |               No item found
66 |             </p>
67 |           ) : (
68 |             data_items.map((item) => (
69 |               <ProductCard key={item.slug} item={item} />
70 |             ))
71 |           )
72 |         ) : (
73 |           <>
74 |             <CardSkeleton />
75 |             <CardSkeleton />
76 |             <CardSkeleton />
77 |             <CardSkeleton />
78 |             <CardSkeleton />
79 |           </>
80 |         )}
81 |       </Layout>
82 |     </>
83 |   );
84 | }
85 | 
86 | export default Category;
87 | 


--------------------------------------------------------------------------------
/pages/ourstore.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import Header from "../components/header";
 3 | import Head from "next/head";
 4 | 
 5 | function OurStore() {
 6 |   return (
 7 |     <>
 8 |       <Head>
 9 |         <title>wefootwear | Store</title>
10 |       </Head>
11 |       <div className="w-full min-h-screen bg-cusgray ">
12 |         <Header />
13 |         <div className="max-w-5xl mx-auto pt-20 pb-10 md:px-0">
14 |           <div className="md:rounded-2xl overflow-hidden bg-white shadow-lg grid grid-cols-1 md:grid-cols-2">
15 |             <div className="grid relative grid-cols-2 grid-rows-2 overflow-hidden bg-gray-600 gap-0">
16 |               <div className="absolute top-0 w-full h-full bg-gray-500 bg-opacity-30"></div>
17 |               <div className="col-span-1 h-60">
18 |                 <img
19 |                   className="object-cover w-full h-full"
20 |                   src="https://i.ibb.co/6bry43z/wf2017232543p.jpg"
21 |                   alt=""
22 |                 />
23 |               </div>
24 |               <div className="col-span-1 h-60">
25 |                 <img
26 |                   className="object-cover w-full h-full"
27 |                   src="https://i.ibb.co/rZckbV2/IMG-4202-2.jpg"
28 |                   alt=""
29 |                 />
30 |               </div>
31 |               <div className="col-span-2 h-60">
32 |                 <img
33 |                   className="object-cover w-full h-full"
34 |                   src="https://i.ibb.co/cgwbYrz/134f32d1181f86590506f301cb9509a3.jpg"
35 |                   alt=""
36 |                 />
37 |               </div>
38 |             </div>
39 |             <div className="px-10 py-10 text-cusblack row-start-1 md:col-start-2">
40 |               <h1 className="text-xl mb-5 bg-cusblack text-white py-1 px-3 rounded-sm">
41 |                 Our Store
42 |               </h1>
43 |               <div className="my-2">
44 |                 <h3 className="mb-1 text-lg font font-semibold">
45 |                   Wefootwear Offline Store
46 |                 </h3>
47 |                 <p className="text-sm">
48 |                   Jl. Brigjen Katamso No. 54, West Progo.
49 |                 </p>
50 |               </div>
51 |               <div className="my-2 mt-4">
52 |                 <h3 className="mb-1 text-lg font font-semibold">
53 |                   Monday Center
54 |                 </h3>
55 |                 <p className="text-sm">Jl. Malioboro No. 4, Yogyakarta.</p>
56 |               </div>
57 |               <div className="my-2 mt-4">
58 |                 <h3 className="mb-1 text-lg font font-semibold">Flight Club</h3>
59 |                 <p className="text-sm">
60 |                   535 N Fairfax Ave, Los Angeles, CA 90036, AS.
61 |                 </p>
62 |               </div>
63 |             </div>
64 |           </div>
65 |         </div>
66 |       </div>
67 |     </>
68 |   );
69 | }
70 | 
71 | export default OurStore;
72 | 


--------------------------------------------------------------------------------
/pages/success.js:
--------------------------------------------------------------------------------
 1 | import { motion } from "framer-motion";
 2 | import React, { useEffect } from "react";
 3 | import Header from "../components/header";
 4 | import Head from "next/head";
 5 | import Router from "next/router";
 6 | import { useDispatch } from "react-redux";
 7 | import { deleteFromBasket } from "../slices/basketSlice";
 8 | 
 9 | function Success() {
10 |   const dispatch = useDispatch();
11 |   useEffect(() => {
12 |     dispatch(deleteFromBasket());
13 |   }, []);
14 |   return (
15 |     <>
16 |       <Head>
17 |         <title>Payment Success</title>
18 |       </Head>
19 |       <div className="w-full min-h-screen bg-cusgray ">
20 |         <Header />
21 |         <div className="flex min-h-screen place-items-center justify-center">
22 |           <div className="max-w-3xl mx-auto pb-10 w-10/12 md:w-auto">
23 |             <motion.div
24 |               initial={{ opacity: 0 }}
25 |               animate={{ opacity: 1 }}
26 |               className="rounded-2xl overflow-hidden bg-white shadow-lg p-5 flex place-items-center justify-center"
27 |             >
28 |               <div className="flex flex-col place-items-center text-center text-cusblack">
29 |                 <svg
30 |                   className="w-28 h-28 text-green-400"
31 |                   fill="none"
32 |                   stroke="currentColor"
33 |                   viewBox="0 0 24 24"
34 |                   xmlns="http://www.w3.org/2000/svg"
35 |                 >
36 |                   <path
37 |                     strokeLinecap="round"
38 |                     strokeLinejoin="round"
39 |                     strokeWidth={2}
40 |                     d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"
41 |                   />
42 |                 </svg>
43 |                 <h1 className="my-2 text-2xl font font-semibold">
44 |                   Thanks for your order
45 |                 </h1>
46 |                 <p className="text-sm my-2 md:w-2/3 leading-relaxed">
47 |                   Your order is being processed by our delivery team and you
48 |                   should receive a confirmation from us shortly. Click the
49 |                   button below to see your orders
50 |                 </p>
51 |                 <button
52 |                   onClick={() => Router.push("/orders")}
53 |                   className="py-2 px-4 text-xs hover:bg-white hover:text-cusblack duration-200 hover:border-cusblack border rounded-lg my-2 bg-cusblack text-white"
54 |                 >
55 |                   See My Orders
56 |                 </button>
57 |               </div>
58 |             </motion.div>
59 |           </div>
60 |         </div>
61 |       </div>
62 |     </>
63 |   );
64 | }
65 | 
66 | export default Success;
67 | 


--------------------------------------------------------------------------------
/components/productcard.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import Image from "next/image";
 3 | import NumberFormat from "react-number-format";
 4 | import { motion } from "framer-motion";
 5 | import Router from "next/router";
 6 | import { useDispatch } from "react-redux";
 7 | import { addToWishlist } from "../slices/wishlistSlice";
 8 | 
 9 | function ProductCard({ item }) {
10 |   const { size, image } = item.prop[0];
11 |   const dispatch = useDispatch();
12 | 
13 |   return (
14 |     <div className="rounded-xl cursor-pointer">
15 |       <div className="overflow-hidden cursor-default rounded-xl relative group">
16 |         <motion.div
17 |           initial={{ scale: 1.3, x: 50, opacity: 0 }}
18 |           animate={{ scale: 1, x: 0, opacity: 1 }}
19 |           transition={{ delay: 0.2 }}
20 |         >
21 |           <Image
22 |             height={700}
23 |             width={700}
24 |             objectFit="cover"
25 |             loading="lazy"
26 |             src={image[0]}
27 |             alt=""
28 |             className="rounded-xl w-full h-full bg-cusgray"
29 |           />
30 |         </motion.div>
31 |         <div className="hidden absolute rounded-xl h-full w-full bg-gray-500 backdrop-filter backdrop-blur-sm bg-opacity-30 top-0 group group-hover:flex justify-center place-items-center z-10">
32 |           <div className="flex overflow-hidden cursor-pointer">
33 |             <button
34 |               onClick={() => dispatch(addToWishlist(item))}
35 |               className="p-2 bg-white hover:bg-gray-100 active:bg-gray-200 rounded-lg"
36 |             >
37 |               <svg
38 |                 className="w-6 m-auto h-6 text-cusblack"
39 |                 fill="none"
40 |                 stroke="currentColor"
41 |                 viewBox="0 0 24 24"
42 |                 xmlns="http://www.w3.org/2000/svg"
43 |               >
44 |                 <path
45 |                   strokeLinecap="round"
46 |                   strokeLinejoin="round"
47 |                   strokeWidth={2}
48 |                   d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"
49 |                 />
50 |               </svg>
51 |             </button>
52 |           </div>
53 |         </div>
54 |       </div>
55 |       <div
56 |         onClick={() => Router.push("/product/" + item.slug)}
57 |         className="px-2 py-2"
58 |       >
59 |         <p className="text-sm line-clamp-1">{item.name}</p>
60 |         <p className="text-xs my-2 text-gray-400">{item.color}</p>
61 |         {/* <p className="text-sm font-semibold">Rp {price}</p> */}
62 |         <NumberFormat
63 |           value={item.price}
64 |           className="text-sm font-semibold text-cusblack"
65 |           displayType={"text"}
66 |           thousandSeparator={true}
67 |           prefix={"Rp"}
68 |           renderText={(value, props) => (
69 |             <p className="text-sm font-semibold" {...props}>
70 |               {value}
71 |             </p>
72 |           )}
73 |         />
74 |       </div>
75 |     </div>
76 |   );
77 | }
78 | 
79 | export default ProductCard;
80 | 


--------------------------------------------------------------------------------
/components/ordercard.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import NumberFormat from "react-number-format";
 3 | import moment from "moment";
 4 | 
 5 | function OrderCard({ order }) {
 6 |   console.log(order);
 7 |   return (
 8 |     <div className="py-2 px-4 rounded-lg shadow-lg mb-2">
 9 |       <div className="flex place-items-center text-xs text-cusblack py-1">
10 |         <svg
11 |           className="w-5 h-5 text-cusblack"
12 |           fill="currentColor"
13 |           viewBox="0 0 20 20"
14 |           xmlns="http://www.w3.org/2000/svg"
15 |         >
16 |           <path
17 |             fillRule="evenodd"
18 |             d="M10 2a4 4 0 00-4 4v1H5a1 1 0 00-.994.89l-1 9A1 1 0 004 18h12a1 1 0 00.994-1.11l-1-9A1 1 0 0015 7h-1V6a4 4 0 00-4-4zm2 5V6a2 2 0 10-4 0v1h4zm-6 3a1 1 0 112 0 1 1 0 01-2 0zm7-1a1 1 0 100 2 1 1 0 000-2z"
19 |             clipRule="evenodd"
20 |           />
21 |         </svg>
22 |         <p className="mx-2 font-semibold">Shop</p>
23 |         <p>{moment.unix(order.timestamp).format("DD MMM YYYY")}</p>
24 |         <div className="py-0.5 px-2 bg-cusblack text-white mx-3 flex text-[8px] place-items-center rounded-lg">
25 |           processed
26 |         </div>
27 |       </div>
28 | 
29 |       <div className="flex flex-col my-1">
30 |         <div className="md:flex mt-2">
31 |           <div className="md:w-3/4 border-b md:border-b-0 md:border-r border-gray-300">
32 |             {order.items.map((it, idx) => (
33 |               <div key={idx} className="flex mb-2">
34 |                 <img
35 |                   className="w-16 h-16 rounded-lg object-cover"
36 |                   src={order.images[idx]}
37 |                   alt=""
38 |                 />
39 |                 <div className="mx-3 text-xs text-cusblack">
40 |                   <p className="text-sm font-semibold">{it.description}</p>
41 |                   <div className="flex">
42 |                     <p className="text-cusblack mr-1">{it.quantity} x </p>
43 |                     <NumberFormat
44 |                       value={(it.amount_subtotal / it.quantity) * 100}
45 |                       className="text-gray-400 text-xs"
46 |                       displayType={"text"}
47 |                       thousandSeparator={true}
48 |                       prefix={"Rp"}
49 |                       renderText={(value, props) => (
50 |                         <p className="text-gray-400 text-xs" {...props}>
51 |                           {value}
52 |                         </p>
53 |                       )}
54 |                     />
55 |                   </div>
56 |                 </div>
57 |               </div>
58 |             ))}
59 |           </div>
60 |           <div className="md:w-1/4 mt-2 md:mt-0 text-xs text-cusblack flex md:flex-col justify-center place-items-center">
61 |             <p className="text-gray-400 md:mb-1">Total Amount :</p>
62 |             <NumberFormat
63 |               value={order.items.reduce(
64 |                 (val, item) => val + item.amount_subtotal * 100,
65 |                 0
66 |               )}
67 |               className="font-semibold"
68 |               displayType={"text"}
69 |               thousandSeparator={true}
70 |               prefix={"Rp"}
71 |               renderText={(value, props) => (
72 |                 <p className="text-gray-400 text-xs" {...props}>
73 |                   {value}
74 |                 </p>
75 |               )}
76 |             />
77 |           </div>
78 |         </div>
79 |       </div>
80 |     </div>
81 |   );
82 | }
83 | 
84 | export default OrderCard;
85 | 


--------------------------------------------------------------------------------
/pages/_document.js:
--------------------------------------------------------------------------------
  1 | import Document, { Html, Head, Main, NextScript } from "next/document";
  2 | 
  3 | class MyDocument extends Document {
  4 |   static async getInitialProps(ctx) {
  5 |     const initialProps = await Document.getInitialProps(ctx);
  6 |     return { ...initialProps };
  7 |   }
  8 | 
  9 |   render() {
 10 |     return (
 11 |       <Html>
 12 |         <Head>
 13 |           <meta name="application-name" content="wefootwear Store" />
 14 |           <meta name="apple-mobile-web-app-capable" content="yes" />
 15 |           <meta
 16 |             name="apple-mobile-web-app-status-bar-style"
 17 |             content="default"
 18 |           />
 19 |           <meta name="apple-mobile-web-app-title" content="wefootwear Store" />
 20 |           <meta name="description" content="Shoe Store Based in Indonesia" />
 21 |           <meta name="format-detection" content="telephone=no" />
 22 |           <meta name="mobile-web-app-capable" content="yes" />
 23 |           <meta
 24 |             name="msapplication-config"
 25 |             content="/static/icons/browserconfig.xml"
 26 |           />
 27 |           <meta name="msapplication-TileColor" content="#000" />
 28 |           <meta name="msapplication-tap-highlight" content="no" />
 29 |           <meta name="theme-color" content="#fff" />
 30 | 
 31 |           <link rel="apple-touch-icon" href="/icon-192x192.png" />
 32 |           <link
 33 |             rel="apple-touch-icon"
 34 |             sizes="152x152"
 35 |             href="/icon-192x192.png"
 36 |           />
 37 |           <link
 38 |             rel="apple-touch-icon"
 39 |             sizes="180x180"
 40 |             href="/icon-192x192.png"
 41 |           />
 42 |           <link
 43 |             rel="apple-touch-icon"
 44 |             sizes="167x167"
 45 |             href="/icon-192x192.png"
 46 |           />
 47 | 
 48 |           <link
 49 |             rel="icon"
 50 |             type="image/png"
 51 |             sizes="32x32"
 52 |             href="/icon-192x192.png"
 53 |           />
 54 | 
 55 |           <link rel="mask-icon" href="/icon-192x192.png" color="#5bbad5" />
 56 |           <link rel="shortcut icon" href="/icon-192x192.png" />
 57 |           <link
 58 |             rel="stylesheet"
 59 |             href="https://fonts.googleapis.com/css?family=Roboto:300,400,500"
 60 |           />
 61 | 
 62 |           <meta name="twitter:card" content="summary" />
 63 |           <meta name="twitter:url" content="https://wefootwear.vercel.com" />
 64 |           <meta name="twitter:title" content="wefootwear Store" />
 65 |           <meta
 66 |             name="twitter:description"
 67 |             content="Shoe Store based in Indonesia"
 68 |           />
 69 |           <meta name="twitter:image" content="/icon-192x192.png" />
 70 |           <meta name="twitter:creator" content="@mudzikale" />
 71 |           <meta property="og:type" content="website" />
 72 |           <meta property="og:title" content="wefootwear Store" />
 73 |           <meta
 74 |             property="og:description"
 75 |             content="Shoe Store based in Indonesia"
 76 |           />
 77 |           <meta property="og:site_name" content="wefootwear" />
 78 |           <meta property="og:url" content="https://wefootwear.vercel.com" />
 79 |           <meta property="og:image" content="/icon-192x192.png" />
 80 |           <link rel="preconnect" href="https://fonts.googleapis.com" />
 81 |           <link rel="manifest" href="/manifest.json" />
 82 |           <link rel="icon" href="/icon-512x512.png" type="image/x-icon" />
 83 |           <link
 84 |             rel="preconnect"
 85 |             href="https://fonts.gstatic.com"
 86 |             crossOrigin="true"
 87 |           />
 88 |           <link
 89 |             href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,700&display=swap"
 90 |             rel="stylesheet"
 91 |           />
 92 |         </Head>
 93 |         <body>
 94 |           <Main />
 95 |           <NextScript />
 96 |         </body>
 97 |       </Html>
 98 |     );
 99 |   }
100 | }
101 | 
102 | export default MyDocument;
103 | 


--------------------------------------------------------------------------------
/components/basketproduct.js:
--------------------------------------------------------------------------------
  1 | import React from "react";
  2 | import NumberFormat from "react-number-format";
  3 | import { useDispatch } from "react-redux";
  4 | import { removeFromBasket, plusItem, minusItem } from "../slices/basketSlice";
  5 | import { motion } from "framer-motion";
  6 | import Link from "next/link";
  7 | 
  8 | function BasketProduct({ item, idx }) {
  9 |   const dispatch = useDispatch();
 10 |   return (
 11 |     <div
 12 |       className="product md:flex justify-between mb-6"
 13 |       suppressHydrationWarning
 14 |     >
 15 |       <Link href={"/product/" + item.slug}>
 16 |         <div className="image md:flex cursor-pointer">
 17 |           <motion.div
 18 |             initial={{ scale: 1.5, x: 50, y: -50, opacity: 0 }}
 19 |             animate={{ scale: 1, x: 0, y: 0, opacity: 1 }}
 20 |           >
 21 |             <img
 22 |               className="w-full md:w-32 h-32 object-cover rounded-xl"
 23 |               src={item.prop[0].image[0]}
 24 |               alt=""
 25 |             />
 26 |           </motion.div>
 27 |           <div className="ml-3 flex flex-col text-cusblack justify-between py-2">
 28 |             <p className="font-medium">{item.name}</p>
 29 |             <ul className="text-xs md:text-sm leading-relaxed text-gray-400">
 30 |               <li>Color: {item.color}</li>
 31 |               <li>Design ID: {item.category.slug}</li>
 32 |               <li>Quantity: {item.quantity}</li>
 33 |               <li>Size: {item.selectedSizeProp}</li>
 34 |             </ul>
 35 |           </div>
 36 |         </div>
 37 |       </Link>
 38 |       <div className="flex flex-col justify-between py-1">
 39 |         <NumberFormat
 40 |           value={item.price}
 41 |           className="font-semibold text-cusblack text-right"
 42 |           displayType={"text"}
 43 |           thousandSeparator={true}
 44 |           prefix={"Rp"}
 45 |           renderText={(value, props) => (
 46 |             <h1 className="font-semibold text-cusblack text-right" {...props}>
 47 |               {value}
 48 |             </h1>
 49 |           )}
 50 |         />
 51 |         <div className="flex ml-auto text-cusblack mt-1 md:mt-0">
 52 |           <button
 53 |             onClick={() => {
 54 |               if (item.quantity > 1) dispatch(minusItem(idx));
 55 |             }}
 56 |             className="border border-cusblack active:bg-gray-800 rounded-sm p-1 hover:bg-cusblack hover:text-white duration-100"
 57 |           >
 58 |             <svg
 59 |               className="w-4 h-4"
 60 |               fill="none"
 61 |               stroke="currentColor"
 62 |               viewBox="0 0 24 24"
 63 |               xmlns="http://www.w3.org/2000/svg"
 64 |             >
 65 |               <path
 66 |                 strokeLinecap="round"
 67 |                 strokeLinejoin="round"
 68 |                 strokeWidth={2}
 69 |                 d="M20 12H4"
 70 |               />
 71 |             </svg>
 72 |           </button>
 73 |           <button
 74 |             onClick={() => dispatch(plusItem(idx))}
 75 |             className="border border-cusblack active:bg-gray-800 rounded-sm p-1 hover:bg-cusblack hover:text-white duration-100 mx-1"
 76 |           >
 77 |             <svg
 78 |               className="w-4 h-4"
 79 |               fill="none"
 80 |               stroke="currentColor"
 81 |               viewBox="0 0 24 24"
 82 |               xmlns="http://www.w3.org/2000/svg"
 83 |             >
 84 |               <path
 85 |                 strokeLinecap="round"
 86 |                 strokeLinejoin="round"
 87 |                 strokeWidth={2}
 88 |                 d="M12 6v6m0 0v6m0-6h6m-6 0H6"
 89 |               />
 90 |             </svg>
 91 |           </button>
 92 |           <button
 93 |             onClick={() => dispatch(removeFromBasket(item))}
 94 |             className="border border-cusblack active:bg-gray-800 rounded-sm p-1 hover:bg-cusblack hover:text-white duration-100 text-xs px-2 font-medium"
 95 |           >
 96 |             REMOVE
 97 |           </button>
 98 |         </div>
 99 |       </div>
100 |     </div>
101 |   );
102 | }
103 | 
104 | export default BasketProduct;
105 | 


--------------------------------------------------------------------------------
/pages/index.js:
--------------------------------------------------------------------------------
  1 | import { Carousel } from "react-responsive-carousel";
  2 | import "react-responsive-carousel/lib/styles/carousel.min.css";
  3 | import Link from "next/link";
  4 | import { motion } from "framer-motion";
  5 | import Header from "../components/header";
  6 | import Head from "next/head";
  7 | 
  8 | export default function Home() {
  9 |   const line = "wefootwear";
 10 | 
 11 |   const sentence = {
 12 |     animate: {
 13 |       transition: {
 14 |         staggerChildren: 0.1,
 15 |       },
 16 |     },
 17 |   };
 18 | 
 19 |   const letter = {
 20 |     initial: {
 21 |       opacity: 0,
 22 |       y: 400,
 23 |     },
 24 |     animate: {
 25 |       opacity: 1,
 26 |       y: 0,
 27 |       transition: {
 28 |         ease: [0.6, 0.01, -0.05, 0.95],
 29 |         duration: 1,
 30 |       },
 31 |     },
 32 |     exit: {
 33 |       opacity: 0,
 34 |       y: -40,
 35 |       transition: {
 36 |         ease: [0.6, 0.01, -0.05, 0.95],
 37 |         duration: 1,
 38 |       },
 39 |     },
 40 |   };
 41 | 
 42 |   return (
 43 |     <>
 44 |       <Head>
 45 |         <title>wefootwear | Home</title>
 46 |       </Head>
 47 |       <div className="w-full h-screen relative">
 48 |         <Header />
 49 |         <div className="absolute top-1/3 z-20 flex flex-col place-items-center w-full">
 50 |           <div className="">
 51 |             <motion.div
 52 |               variants={sentence}
 53 |               initial="initial"
 54 |               animate="animate"
 55 |               exit="exit"
 56 |               className="text-4xl md:text-6xl font-semibold text-white  overflow-hidden"
 57 |             >
 58 |               <div className="flex overflow-hidden">
 59 |                 {line.split("").map((char, idx) => {
 60 |                   return (
 61 |                     <motion.div key={char + "-" + idx} variants={letter}>
 62 |                       {char}
 63 |                     </motion.div>
 64 |                   );
 65 |                 })}
 66 |               </div>
 67 |               <Link href="/shop/">
 68 |                 <motion.p
 69 |                   variants={letter}
 70 |                   className="flex justify-center w-full place-items-center text-white underline mt-5 text-sm font-normal cursor-pointer"
 71 |                 >
 72 |                   Shop Now
 73 |                   <span>
 74 |                     <svg
 75 |                       className="w-4 h-4 ml-2"
 76 |                       fill="currentColor"
 77 |                       viewBox="0 0 20 20"
 78 |                       xmlns="http://www.w3.org/2000/svg"
 79 |                     >
 80 |                       <path
 81 |                         fillRule="evenodd"
 82 |                         d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
 83 |                         clipRule="evenodd"
 84 |                       />
 85 |                     </svg>
 86 |                   </span>
 87 |                 </motion.p>
 88 |               </Link>
 89 |             </motion.div>
 90 |           </div>
 91 |         </div>
 92 | 
 93 |         <motion.div
 94 |           initial={{ y: -1000 }}
 95 |           transition={{ ease: [0.6, 0.01, -0.05, 0.95], duration: 1 }}
 96 |           animate={{ y: 0 }}
 97 |           className="relative"
 98 |         >
 99 |           <div className="w-full h-screen bg-gray-500 bg-opacity-30 absolute top-0 z-10 pointer-events-none"></div>
100 |           <Carousel
101 |             autoPlay
102 |             infiniteLoop
103 |             showStatus={false}
104 |             showArrows={false}
105 |             showThumbs={false}
106 |             transitionTime={500}
107 |             interval={3000}
108 |             stopOnHover={false}
109 |             swipeable={false}
110 |           >
111 |             <div>
112 |               <img
113 |                 className="h-screen object-cover w-full"
114 |                 loading="lazy"
115 |                 src="https://i.ibb.co/pffTtVv/https-hypebeast-com-image-2018-12-these-are-the-best-sneakers-of-2018-005.jpg"
116 |               />
117 |             </div>
118 |             <div>
119 |               <img
120 |                 className="h-screen object-cover w-full"
121 |                 loading="lazy"
122 |                 src="https://i.ibb.co/4YskC1T/c095795f992f84b92b16c65b93ecb5f5.jpg"
123 |               />
124 |             </div>
125 |             <div>
126 |               <img
127 |                 className="h-screen object-cover w-full"
128 |                 loading="lazy"
129 |                 src="https://i.ibb.co/bvvFBPt/R.jpg"
130 |               />
131 |             </div>
132 |           </Carousel>
133 |         </motion.div>
134 |       </div>
135 |     </>
136 |   );
137 | }
138 | 


--------------------------------------------------------------------------------
/pages/login.js:
--------------------------------------------------------------------------------
  1 | import { motion } from "framer-motion";
  2 | import Link from "next/link";
  3 | import React, { useState } from "react";
  4 | import { useRouter } from "next/dist/client/router";
  5 | import nookies from "nookies";
  6 | import Head from "next/head";
  7 | 
  8 | export async function getServerSideProps(ctx) {
  9 |   const cookies = nookies.get(ctx);
 10 | 
 11 |   if (cookies.token) {
 12 |     return {
 13 |       redirect: {
 14 |         destination: "/shop",
 15 |       },
 16 |     };
 17 |   }
 18 | 
 19 |   return {
 20 |     props: {},
 21 |   };
 22 | }
 23 | 
 24 | function Login() {
 25 |   const [field, setField] = useState({});
 26 |   const [loading, setLoading] = useState(false);
 27 |   const router = useRouter();
 28 |   const [error, setError] = useState(false);
 29 | 
 30 |   const handleChange = (e) => {
 31 |     setField({ ...field, [e.target.name]: e.target.value });
 32 |   };
 33 | 
 34 |   const doLogin = async (e) => {
 35 |     e.preventDefault();
 36 |     setLoading(true);
 37 |     const req = await fetch(process.env.NEXT_PUBLIC_APIURL + "/auth/local", {
 38 |       method: "POST",
 39 |       headers: {
 40 |         "Content-Type": "application/json",
 41 |       },
 42 |       body: JSON.stringify(field),
 43 |     });
 44 |     const res = await req.json();
 45 |     if (res.statusCode > 299) {
 46 |       setError(true);
 47 |     }
 48 |     if (res.jwt) {
 49 |       nookies.set(null, "token", JSON.stringify(res.jwt));
 50 |       nookies.set(null, "user", JSON.stringify(res.user));
 51 |       setField({});
 52 |       console.log("success");
 53 |       e.target.reset();
 54 |       router.push("/shop");
 55 |     }
 56 |     setLoading(false);
 57 |   };
 58 |   return (
 59 |     <>
 60 |       <Head>
 61 |         <title>wefootwear | Login</title>
 62 |       </Head>
 63 |       <div className="w-full min-h-screen relative bg-cusgray pb-10 flex justify-center place-items-center">
 64 |         {loading && (
 65 |           <div className="w-full h-screen flex justify-center place-items-center absolute top-0 right-0 bg-white backdrop-blur-sm bg-opacity-20">
 66 |             <img
 67 |               src="https://i.ibb.co/8jP3GyP/Dual-Ball-1-1s-200px.gif"
 68 |               className="w-20"
 69 |               alt=""
 70 |             />
 71 |           </div>
 72 |         )}
 73 |         <motion.div
 74 |           initial={{ opacity: 0 }}
 75 |           animate={{ opacity: 1 }}
 76 |           className="p-5 max-w-md bg-white flex flex-col place-items-center shadow-lg rounded-xl mx-2"
 77 |         >
 78 |           <Link href="/shop">
 79 |             <img
 80 |               className="w-20 cursor-pointer"
 81 |               src="https://i.ibb.co/gvgWg23/modern-sports-shoes-logo-vector-illustration-213560119-Convert-Image.jpg"
 82 |               alt=""
 83 |             />
 84 |           </Link>
 85 |           <h1 className="text-center text-xl font-bold text-cusblack leading-6 my-5">
 86 |             YOUR ACCOUNT FOR
 87 |             <br />
 88 |             EVERYTHING
 89 |           </h1>
 90 |           <form onSubmit={doLogin}>
 91 |             {error && (
 92 |               <div className="text-xs text-light text-center text-red-500">
 93 |                 Invalid email or password, check your input again
 94 |               </div>
 95 |             )}
 96 |             <input
 97 |               onChange={handleChange}
 98 |               type="text"
 99 |               name="identifier"
100 |               placeholder="Email address"
101 |               className="my-2 border rounded-sm border-gray-300 w-full px-4 py-3 text-sm"
102 |             />
103 |             <input
104 |               onChange={handleChange}
105 |               type="password"
106 |               name="password"
107 |               placeholder="Password"
108 |               className="my-2 border rounded-sm border-gray-300 w-full px-4 py-3 text-sm"
109 |             />
110 | 
111 |             <p className="text-xs text-gray-400 my-2 text-center px-6">
112 |               By logging in, you agree to shop's{" "}
113 |               <span className="underline">Privacy Policy</span> and{" "}
114 |               <span className="underline">Terms of Use</span>.
115 |             </p>
116 |             <button
117 |               type="submit"
118 |               className="bg-cusblack rounded-sm w-full text-white py-2 mt-3"
119 |             >
120 |               SIGN IN
121 |             </button>
122 |           </form>
123 |           <div className="text-xs text-gray-400 mt-5">
124 |             Not a member?{" "}
125 |             <Link href="/register">
126 |               <a className="underline">Join Us</a>
127 |             </Link>
128 |           </div>
129 |         </motion.div>
130 |       </div>
131 |     </>
132 |   );
133 | }
134 | 
135 | export default Login;
136 | 


--------------------------------------------------------------------------------
/pages/register.js:
--------------------------------------------------------------------------------
  1 | import React, { useState } from "react";
  2 | import Link from "next/link";
  3 | import { motion } from "framer-motion";
  4 | import nookies from "nookies";
  5 | import Head from "next/head";
  6 | 
  7 | export async function getServerSideProps(ctx) {
  8 |   const cookies = nookies.get(ctx);
  9 | 
 10 |   if (cookies.token) {
 11 |     return {
 12 |       redirect: {
 13 |         destination: "/shop",
 14 |       },
 15 |     };
 16 |   }
 17 | 
 18 |   return {
 19 |     props: {},
 20 |   };
 21 | }
 22 | 
 23 | function Register() {
 24 |   const [field, setField] = useState({});
 25 |   const [loading, setLoading] = useState(false);
 26 |   const [success, setSuccess] = useState(false);
 27 | 
 28 |   const handleChange = (e) => {
 29 |     setField({ ...field, [e.target.name]: e.target.value });
 30 |     console.log(field);
 31 |   };
 32 | 
 33 |   const doRegister = async (e) => {
 34 |     e.preventDefault();
 35 |     setLoading(true);
 36 |     const req = await fetch(
 37 |       process.env.NEXT_PUBLIC_APIURL + "/auth/local/register",
 38 |       {
 39 |         method: "POST",
 40 |         headers: {
 41 |           "Content-Type": "application/json",
 42 |         },
 43 |         body: JSON.stringify(field),
 44 |       }
 45 |     );
 46 |     const res = await req.json();
 47 |     console.log(res);
 48 | 
 49 |     if (res.jwt) {
 50 |       setSuccess(true);
 51 |       setField({});
 52 |       e.target.reset();
 53 |     }
 54 |     setLoading(false);
 55 |   };
 56 | 
 57 |   return (
 58 |     <>
 59 |       <Head>
 60 |         <title>wefootwear | Register</title>
 61 |       </Head>
 62 |       <motion.div
 63 |         initial={{ opacity: 0 }}
 64 |         animate={{ opacity: 1 }}
 65 |         className="w-full min-h-screen relative bg-cusgray pb-10 flex justify-center place-items-center"
 66 |       >
 67 |         {loading && (
 68 |           <div className="w-full h-screen flex justify-center place-items-center absolute top-0 right-0 bg-white backdrop-blur-sm bg-opacity-20">
 69 |             <img
 70 |               src="https://i.ibb.co/8jP3GyP/Dual-Ball-1-1s-200px.gif"
 71 |               className="w-20"
 72 |               alt=""
 73 |             />
 74 |           </div>
 75 |         )}
 76 | 
 77 |         <form
 78 |           onSubmit={doRegister}
 79 |           className="p-5 max-w-md mx-2 bg-white flex flex-col place-items-center shadow-lg rounded-xl"
 80 |         >
 81 |           <h1 className="text-center text-xl font-bold text-cusblack leading-6 my-5">
 82 |             BECOME A MEMBER
 83 |           </h1>
 84 |           <p className="text-sm font-medium text-gray-400 mb-4 text-center px-6">
 85 |             Create your Shop Member profile and get first access to the very
 86 |             best of products, inspiration and community.
 87 |           </p>
 88 |           {success && (
 89 |             <div className="text-xs text-center mb-2 font-light text-green-500">
 90 |               Your account has been registered as a member
 91 |             </div>
 92 |           )}
 93 |           <input
 94 |             onChange={handleChange}
 95 |             required
 96 |             type="text"
 97 |             placeholder="Username"
 98 |             name="username"
 99 |             className="my-2 border rounded-sm border-gray-300 w-full px-4 py-3 text-sm"
100 |           />
101 |           <input
102 |             onChange={handleChange}
103 |             required
104 |             type="text"
105 |             placeholder="Email address"
106 |             name="email"
107 |             className="my-2 border rounded-sm border-gray-300 w-full px-4 py-3 text-sm"
108 |           />
109 |           <input
110 |             onChange={handleChange}
111 |             required
112 |             type="password"
113 |             placeholder="Password"
114 |             name="password"
115 |             className="my-2 border rounded-sm border-gray-300 w-full px-4 py-3 text-sm"
116 |           />
117 | 
118 |           <p className="text-xs text-gray-400 my-2 text-center px-6">
119 |             By register, you agree to shop's{" "}
120 |             <span className="underline">Privacy Policy</span> and{" "}
121 |             <span className="underline">Terms of Use</span>.
122 |           </p>
123 |           <button
124 |             type="submit"
125 |             className="bg-cusblack rounded-sm w-full text-white py-2 mt-3"
126 |           >
127 |             JOIN US
128 |           </button>
129 |           <div className="text-xs text-gray-400 mt-5">
130 |             Already have?{" "}
131 |             <Link href="/login">
132 |               <a className="underline">Sign In</a>
133 |             </Link>
134 |           </div>
135 |         </form>
136 |       </motion.div>
137 |     </>
138 |   );
139 | }
140 | 
141 | export default Register;
142 | 


--------------------------------------------------------------------------------
/public/sw.js:
--------------------------------------------------------------------------------
1 | if(!self.define){const e=e=>{"require"!==e&&(e+=".js");let s=Promise.resolve();return c[e]||(s=new Promise((async s=>{if("document"in self){const c=document.createElement("script");c.src=e,document.head.appendChild(c),c.onload=s}else importScripts(e),s()}))),s.then((()=>{if(!c[e])throw new Error(`Module ${e} didn’t register its module`);return c[e]}))},s=(s,c)=>{Promise.all(s.map(e)).then((e=>c(1===e.length?e[0]:e)))},c={require:Promise.resolve(s)};self.define=(s,n,t)=>{c[s]||(c[s]=Promise.resolve().then((()=>{let c={};const i={uri:location.origin+s.slice(1)};return Promise.all(n.map((s=>{switch(s){case"exports":return c;case"module":return i;default:return e(s)}}))).then((e=>{const s=t(...e);return c.default||(c.default=s),c}))})))}}define("./sw.js",["./workbox-4a677df8"],(function(e){"use strict";importScripts(),self.skipWaiting(),e.clientsClaim(),e.precacheAndRoute([{url:"/_next/static/QGYEMMNCrI5LTHhY_sTJc/_buildManifest.js",revision:"QGYEMMNCrI5LTHhY_sTJc"},{url:"/_next/static/QGYEMMNCrI5LTHhY_sTJc/_ssgManifest.js",revision:"QGYEMMNCrI5LTHhY_sTJc"},{url:"/_next/static/chunks/378-d6fe69afeaeae0820515.js",revision:"QGYEMMNCrI5LTHhY_sTJc"},{url:"/_next/static/chunks/482-3bea6d7d03822fdc7ddb.js",revision:"QGYEMMNCrI5LTHhY_sTJc"},{url:"/_next/static/chunks/65-83ea4b453dc444f083bc.js",revision:"QGYEMMNCrI5LTHhY_sTJc"},{url:"/_next/static/chunks/675-23653c1b51e0ee9e96e3.js",revision:"QGYEMMNCrI5LTHhY_sTJc"},{url:"/_next/static/chunks/75fc9c18-5c1929f66343f0a636cd.js",revision:"QGYEMMNCrI5LTHhY_sTJc"},{url:"/_next/static/chunks/788-df4ef6e69993ae1b776b.js",revision:"QGYEMMNCrI5LTHhY_sTJc"},{url:"/_next/static/chunks/805-936702fdf79c43fc9b2b.js",revision:"QGYEMMNCrI5LTHhY_sTJc"},{url:"/_next/static/chunks/911-83398998ed9ed0225e54.js",revision:"QGYEMMNCrI5LTHhY_sTJc"},{url:"/_next/static/chunks/framework-2191d16384373197bc0a.js",revision:"QGYEMMNCrI5LTHhY_sTJc"},{url:"/_next/static/chunks/main-22b8da49a1a363fbd457.js",revision:"QGYEMMNCrI5LTHhY_sTJc"},{url:"/_next/static/chunks/pages/404-dbb10b5e831708f3bc5e.js",revision:"QGYEMMNCrI5LTHhY_sTJc"},{url:"/_next/static/chunks/pages/_app-15c2288ae15dbe2f73dd.js",revision:"QGYEMMNCrI5LTHhY_sTJc"},{url:"/_next/static/chunks/pages/_error-9faf4177fb4e528b4124.js",revision:"QGYEMMNCrI5LTHhY_sTJc"},{url:"/_next/static/chunks/pages/basket-71e094c4e75232f474c4.js",revision:"QGYEMMNCrI5LTHhY_sTJc"},{url:"/_next/static/chunks/pages/index-fb9e8232c3c1106f6b81.js",revision:"QGYEMMNCrI5LTHhY_sTJc"},{url:"/_next/static/chunks/pages/login-d30cf6ff9c65ccc1a1b9.js",revision:"QGYEMMNCrI5LTHhY_sTJc"},{url:"/_next/static/chunks/pages/orders-14038cd57637cae635d8.js",revision:"QGYEMMNCrI5LTHhY_sTJc"},{url:"/_next/static/chunks/pages/ourstore-31f8a11f4d67d2156567.js",revision:"QGYEMMNCrI5LTHhY_sTJc"},{url:"/_next/static/chunks/pages/product/%5Bslug%5D-8d24c1564536a7ef42c8.js",revision:"QGYEMMNCrI5LTHhY_sTJc"},{url:"/_next/static/chunks/pages/register-20c2fae383c968872a5b.js",revision:"QGYEMMNCrI5LTHhY_sTJc"},{url:"/_next/static/chunks/pages/shop-b902a7f62e0b6664500f.js",revision:"QGYEMMNCrI5LTHhY_sTJc"},{url:"/_next/static/chunks/pages/shop/%5Bslug%5D-71e1ed679449037e7de3.js",revision:"QGYEMMNCrI5LTHhY_sTJc"},{url:"/_next/static/chunks/pages/success-1329c2c1eb414aab3358.js",revision:"QGYEMMNCrI5LTHhY_sTJc"},{url:"/_next/static/chunks/pages/wishlist-4ee5494c1043b5317457.js",revision:"QGYEMMNCrI5LTHhY_sTJc"},{url:"/_next/static/chunks/polyfills-a54b4f32bdc1ef890ddd.js",revision:"QGYEMMNCrI5LTHhY_sTJc"},{url:"/_next/static/chunks/webpack-9fc9ab40a062a7008df3.js",revision:"QGYEMMNCrI5LTHhY_sTJc"},{url:"/_next/static/css/0685f33293880c23b773.css",revision:"QGYEMMNCrI5LTHhY_sTJc"},{url:"/_next/static/css/4931c0d81ba46d2ff0c9.css",revision:"QGYEMMNCrI5LTHhY_sTJc"},{url:"/favicon.ico",revision:"21b739d43fcb9bbb83d8541fe4fe88fa"},{url:"/icon-192x192.png",revision:"36ccef346fae5b35101c22c91f455e53"},{url:"/icon-256x256.png",revision:"97453c4cca84f86d5900a5d79bb1d0ce"},{url:"/icon-384x384.png",revision:"86d00831fddac60e15c60256fa772f48"},{url:"/icon-512x512.png",revision:"6a73b9db3d4e056844144c1e96bf80b1"},{url:"/manifest.json",revision:"10704f4ece9c9fcdb8f1a16b7a33b96b"},{url:"/vercel.svg",revision:"26bf2d0adaf1028a4d4c6ee77005e819"}],{ignoreURLParametersMatching:[]}),e.cleanupOutdatedCaches(),e.registerRoute("/",new e.NetworkFirst({cacheName:"start-url",plugins:[{cacheWillUpdate:async({request:e,response:s,event:c,state:n})=>s&&"opaqueredirect"===s.type?new Response(s.body,{status:200,statusText:"OK",headers:s.headers}):s}]}),"GET"),e.registerRoute(/^https:\/\/fonts\.(?:gstatic)\.com\/.*/i,new e.CacheFirst({cacheName:"google-fonts-webfonts",plugins:[new e.ExpirationPlugin({maxEntries:4,maxAgeSeconds:31536e3})]}),"GET"),e.registerRoute(/^https:\/\/fonts\.(?:googleapis)\.com\/.*/i,new e.StaleWhileRevalidate({cacheName:"google-fonts-stylesheets",plugins:[new e.ExpirationPlugin({maxEntries:4,maxAgeSeconds:604800})]}),"GET"),e.registerRoute(/\.(?:eot|otf|ttc|ttf|woff|woff2|font.css)$/i,new e.StaleWhileRevalidate({cacheName:"static-font-assets",plugins:[new e.ExpirationPlugin({maxEntries:4,maxAgeSeconds:604800})]}),"GET"),e.registerRoute(/\.(?:jpg|jpeg|gif|png|svg|ico|webp)$/i,new e.StaleWhileRevalidate({cacheName:"static-image-assets",plugins:[new e.ExpirationPlugin({maxEntries:64,maxAgeSeconds:86400})]}),"GET"),e.registerRoute(/\/_next\/image\?url=.+$/i,new e.StaleWhileRevalidate({cacheName:"next-image",plugins:[new e.ExpirationPlugin({maxEntries:64,maxAgeSeconds:86400})]}),"GET"),e.registerRoute(/\.(?:mp3|wav|ogg)$/i,new e.CacheFirst({cacheName:"static-audio-assets",plugins:[new e.RangeRequestsPlugin,new e.ExpirationPlugin({maxEntries:32,maxAgeSeconds:86400})]}),"GET"),e.registerRoute(/\.(?:mp4)$/i,new e.CacheFirst({cacheName:"static-video-assets",plugins:[new e.RangeRequestsPlugin,new e.ExpirationPlugin({maxEntries:32,maxAgeSeconds:86400})]}),"GET"),e.registerRoute(/\.(?:js)$/i,new e.StaleWhileRevalidate({cacheName:"static-js-assets",plugins:[new e.ExpirationPlugin({maxEntries:32,maxAgeSeconds:86400})]}),"GET"),e.registerRoute(/\.(?:css|less)$/i,new e.StaleWhileRevalidate({cacheName:"static-style-assets",plugins:[new e.ExpirationPlugin({maxEntries:32,maxAgeSeconds:86400})]}),"GET"),e.registerRoute(/\/_next\/data\/.+\/.+\.json$/i,new e.StaleWhileRevalidate({cacheName:"next-data",plugins:[new e.ExpirationPlugin({maxEntries:32,maxAgeSeconds:86400})]}),"GET"),e.registerRoute(/\.(?:json|xml|csv)$/i,new e.NetworkFirst({cacheName:"static-data-assets",plugins:[new e.ExpirationPlugin({maxEntries:32,maxAgeSeconds:86400})]}),"GET"),e.registerRoute((({url:e})=>{if(!(self.origin===e.origin))return!1;const s=e.pathname;return!s.startsWith("/api/auth/")&&!!s.startsWith("/api/")}),new e.NetworkFirst({cacheName:"apis",networkTimeoutSeconds:10,plugins:[new e.ExpirationPlugin({maxEntries:16,maxAgeSeconds:86400})]}),"GET"),e.registerRoute((({url:e})=>{if(!(self.origin===e.origin))return!1;return!e.pathname.startsWith("/api/")}),new e.NetworkFirst({cacheName:"others",networkTimeoutSeconds:10,plugins:[new e.ExpirationPlugin({maxEntries:32,maxAgeSeconds:86400})]}),"GET"),e.registerRoute((({url:e})=>!(self.origin===e.origin)),new e.NetworkFirst({cacheName:"cross-origin",networkTimeoutSeconds:10,plugins:[new e.ExpirationPlugin({maxEntries:32,maxAgeSeconds:3600})]}),"GET")}));
2 | 


--------------------------------------------------------------------------------
/components/layout.js:
--------------------------------------------------------------------------------
  1 | import React, { useState } from "react";
  2 | import Header from "./header";
  3 | import ShopCarousel from "./shopcarousel";
  4 | import SideCategory from "./sidecategory";
  5 | import TopCategory from "./topcategory";
  6 | 
  7 | function Layout({ children, categories, types, setSort }) {
  8 |   const [open, setOpen] = useState(false);
  9 |   const [grid, setGrid] = useState(4);
 10 |   const [sortOpen, setSortOpen] = useState(false);
 11 |   return (
 12 |     <div className="w-full min-h-screen bg-cusgray pb-10">
 13 |       <Header />
 14 |       <button
 15 |         onClick={() => setOpen(!open)}
 16 |         className="w-12 h-12 rounded-full bg-white fixed z-30 drop-shadow-2xl lg:hidden flex justify-center place-items-center bottom-0 left-0 m-5"
 17 |       >
 18 |         <svg
 19 |           className="w-6 text-cusblack h-6"
 20 |           fill="none"
 21 |           stroke="currentColor"
 22 |           viewBox="0 0 24 24"
 23 |           xmlns="http://www.w3.org/2000/svg"
 24 |         >
 25 |           <path
 26 |             strokeLinecap="round"
 27 |             strokeLinejoin="round"
 28 |             strokeWidth={2}
 29 |             d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"
 30 |           />
 31 |         </svg>
 32 |       </button>
 33 |       <div className="max-w-6xl mx-auto pt-14 md:px-0">
 34 |         <TopCategory categories={categories} />
 35 |         <div className="grid grid-cols-4 gap-x-6">
 36 |           <div
 37 |             onClick={() => setOpen(!open)}
 38 |             className={`${
 39 |               open ? `fixed` : `hidden`
 40 |             } lg:static lg:inline bg-gray-400 lg:bg-cusgray h-screen bg-opacity-30 z-20 flex w-full justify-center place-items-center top-0 lg:p-4`}
 41 |           >
 42 |             <SideCategory typesData={types} />
 43 |           </div>
 44 |           <div className="col-span-4 md:col-span-4 lg:col-span-3 flex flex-col py-4 mx-2 md:mx-0">
 45 |             <ShopCarousel />
 46 |             <div className="rounded-2xl overflow-hidden shadow-lg w-full bg-white mt-6 px-5 py-4">
 47 |               <div className="mb-3">
 48 |                 <div className="flex justify-between place-items-center text-gray-600 text-sm relative">
 49 |                   <div className="flex">
 50 |                     <button
 51 |                       onClick={() => setGrid(4)}
 52 |                       className="p-1 relative flex justify-center items-center rounded-full hover:bg-gray-100 active:bg-gray-200 cursor-pointer duration-200"
 53 |                     >
 54 |                       <svg
 55 |                         className="w-5 h-5 "
 56 |                         fill="none"
 57 |                         stroke="currentColor"
 58 |                         viewBox="0 0 24 24"
 59 |                         xmlns="http://www.w3.org/2000/svg"
 60 |                       >
 61 |                         <path
 62 |                           strokeLinecap="round"
 63 |                           strokeLinejoin="round"
 64 |                           strokeWidth={2}
 65 |                           d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"
 66 |                         />
 67 |                       </svg>
 68 |                     </button>
 69 |                     <button
 70 |                       onClick={() => setGrid(2)}
 71 |                       className="p-1 relative flex justify-center items-center rounded-full hover:bg-gray-100 active:bg-gray-200 cursor-pointer duration-200"
 72 |                     >
 73 |                       <svg
 74 |                         className="w-5 h-5"
 75 |                         fill="none"
 76 |                         stroke="currentColor"
 77 |                         viewBox="0 0 24 24"
 78 |                         xmlns="http://www.w3.org/2000/svg"
 79 |                       >
 80 |                         <path
 81 |                           strokeLinecap="round"
 82 |                           strokeLinejoin="round"
 83 |                           strokeWidth={2}
 84 |                           d="M9 17V7m0 10a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h2a2 2 0 012 2m0 10a2 2 0 002 2h2a2 2 0 002-2M9 7a2 2 0 012-2h2a2 2 0 012 2m0 10V7m0 10a2 2 0 002 2h2a2 2 0 002-2V7a2 2 0 00-2-2h-2a2 2 0 00-2 2"
 85 |                         />
 86 |                       </svg>
 87 |                     </button>
 88 |                   </div>
 89 |                   <button
 90 |                     onClick={() => setSortOpen(!sortOpen)}
 91 |                     className="flex place-items-center hover:bg-gray-100 py-1 px-2 rounded-md active:bg-gray-200"
 92 |                   >
 93 |                     <svg
 94 |                       className="w-5 h-5 mr-1"
 95 |                       fill="none"
 96 |                       stroke="currentColor"
 97 |                       viewBox="0 0 24 24"
 98 |                       xmlns="http://www.w3.org/2000/svg"
 99 |                     >
100 |                       <path
101 |                         strokeLinecap="round"
102 |                         strokeLinejoin="round"
103 |                         strokeWidth={2}
104 |                         d="M3 4h13M3 8h9m-9 4h9m5-4v12m0 0l-4-4m4 4l4-4"
105 |                       />
106 |                     </svg>
107 |                     Sort
108 |                     <svg
109 |                       className="w-4 h-4 ml-1"
110 |                       fill="none"
111 |                       stroke="currentColor"
112 |                       viewBox="0 0 24 24"
113 |                       xmlns="http://www.w3.org/2000/svg"
114 |                     >
115 |                       <path
116 |                         strokeLinecap="round"
117 |                         strokeLinejoin="round"
118 |                         strokeWidth={2}
119 |                         d="M19 9l-7 7-7-7"
120 |                       />
121 |                     </svg>
122 |                   </button>
123 | 
124 |                   <div
125 |                     className={`${
126 |                       sortOpen ? "absolute" : "hidden"
127 |                     } top-7 shadow-lg rounded-md text-sm right-0 bg-white text-gray-500 z-20 px-2 py-2`}
128 |                   >
129 |                     <ul>
130 |                       <li className="py-1 px-2 rounded-sm hover:bg-gray-100 active:bg-gray-200">
131 |                         <button
132 |                           className="w-full"
133 |                           onClick={() => {
134 |                             setSort(0);
135 |                             setSortOpen(false);
136 |                           }}
137 |                         >
138 |                           Newest
139 |                         </button>
140 |                       </li>
141 |                       <li className="py-1 px-2 rounded-sm hover:bg-gray-100 active:bg-gray-200">
142 |                         <button
143 |                           className="w-full"
144 |                           onClick={() => {
145 |                             setSort(1);
146 |                             setSortOpen(false);
147 |                           }}
148 |                         >
149 |                           Price low to high
150 |                         </button>
151 |                       </li>
152 |                       <li className="py-1 px-2 rounded-sm hover:bg-gray-100 active:bg-gray-200">
153 |                         <button
154 |                           className="w-full"
155 |                           onClick={() => {
156 |                             setSort(2);
157 |                             setSortOpen(false);
158 |                           }}
159 |                         >
160 |                           Price high to low
161 |                         </button>
162 |                       </li>
163 |                     </ul>
164 |                   </div>
165 |                 </div>
166 |               </div>
167 |               <div
168 |                 className={`grid grid-cols-2 md:grid-cols-${grid} lg:grid-cols-${grid} gap-x-4 gap-y-6`}
169 |               >
170 |                 {children}
171 |               </div>
172 |             </div>
173 |           </div>
174 |         </div>
175 |       </div>
176 |     </div>
177 |   );
178 | }
179 | 
180 | export default Layout;
181 | 


--------------------------------------------------------------------------------
/pages/basket.js:
--------------------------------------------------------------------------------
  1 | import Link from "next/link";
  2 | import React, { useEffect, useState } from "react";
  3 | import NumberFormat from "react-number-format";
  4 | import { useSelector } from "react-redux";
  5 | import BasketProduct from "../components/basketproduct";
  6 | import Header from "../components/header";
  7 | import { selectItems } from "../slices/basketSlice";
  8 | import nookies from "nookies";
  9 | import Head from "next/head";
 10 | import { loadStripe } from "@stripe/stripe-js";
 11 | import axios from "axios";
 12 | import { useRouter } from "next/dist/client/router";
 13 | const stripePromise = loadStripe(process.env.publishableKey);
 14 | 
 15 | function Basket() {
 16 |   const router = useRouter();
 17 |   const items = useSelector(selectItems);
 18 |   const [loading, setLoading] = useState(false);
 19 |   const [cookie, setCookie] = useState({});
 20 | 
 21 |   useEffect(() => {
 22 |     const dataCookie = nookies.get();
 23 |     try {
 24 |       setCookie(JSON.parse(dataCookie.user));
 25 |     } catch (err) {
 26 |       setCookie(dataCookie.user);
 27 |     }
 28 |     setTimeout(() => setLoading(false), 500);
 29 |   }, []);
 30 | 
 31 |   const createCheckoutSession = async () => {
 32 |     setLoading(true);
 33 |     if (!cookie) {
 34 |       router.push("/login");
 35 |       return;
 36 |     }
 37 |     const stripe = await stripePromise;
 38 |     const checkoutSession = await axios.post("/api/checkoutsession", {
 39 |       items: items,
 40 |       email: cookie.email,
 41 |     });
 42 | 
 43 |     const result = await stripe.redirectToCheckout({
 44 |       sessionId: checkoutSession.data.id,
 45 |     });
 46 |     setLoading(false);
 47 | 
 48 |     if (result.error) alert(result.error.message);
 49 |   };
 50 | 
 51 |   return (
 52 |     <>
 53 |       <Head>
 54 |         <title>wefootwear | Basket</title>
 55 |       </Head>
 56 |       <div className="w-full min-h-screen relative bg-cusgray pb-10">
 57 |         <Header />
 58 |         <div className="max-w-6xl mx-auto pt-20 px-5">
 59 |           <div className="w-full grid grid-cols-1 md:grid-cols-3 gap-x-4">
 60 |             <div className="md:col-span-2 md:mr-5">
 61 |               <div className="">
 62 |                 <div className="shadow-lg rounded-xl bg-cusblack text-white px-5 py-3">
 63 |                   <h1 className="font-semibold text-lg md:text-xl mb-1">
 64 |                     GET FREE SHIPPING WITH MEMBER+ ON EVERY ORDER
 65 |                   </h1>
 66 |                   <p className="text-xs mb-1 text-gray-100">
 67 |                     Non member receive free-shipping for purchases Rp 1,500,000
 68 |                     or more
 69 |                   </p>
 70 |                 </div>
 71 |                 <div className="rounded-xl bg-white px-5 pt-5 mt-5 shadow-lg overflow-hidden">
 72 |                   <p>Your Basket ({items.length})</p>
 73 |                   <div className="pt-5 pb-2">
 74 |                     {items.length > 0 &&
 75 |                       items.map((item, idx) => (
 76 |                         <BasketProduct idx={idx} key={item.slug} item={item} />
 77 |                       ))}
 78 |                     {items.length === 0 && (
 79 |                       <div className="text-gray-400 text-sm mb-10">
 80 |                         <img
 81 |                           className="md:w-1/3 object-cover w-full"
 82 |                           src="https://i.ibb.co/hWZhd6F/empty-cart-4a7779da-Convert-Image.png"
 83 |                           alt=""
 84 |                           className="mx-auto"
 85 |                         />
 86 |                         <p className="text-center">
 87 |                           Your basket is empty,
 88 |                           <br />
 89 |                           to start shopping click{" "}
 90 |                           <span className="underline">
 91 |                             <Link href="/shop">here</Link>
 92 |                           </span>
 93 |                         </p>
 94 |                       </div>
 95 |                     )}
 96 |                   </div>
 97 |                 </div>
 98 |               </div>
 99 |             </div>
100 | 
101 |             <div className="mt-10 md:mt-0 col-span-1">
102 |               <div className="rounded-xl bg-white shadow-lg py-6 px-5">
103 |                 <h1 className="text-cusblack font-bold text-md">SUMMARY</h1>
104 |                 <div className="px-4 py-3 text-xs font-medium flex place-items-center text-gray-400 border border-gray-200 rounded-md my-4">
105 |                   <svg
106 |                     className="w-5 h-5 mr-3"
107 |                     fill="none"
108 |                     stroke="currentColor"
109 |                     viewBox="0 0 24 24"
110 |                     xmlns="http://www.w3.org/2000/svg"
111 |                   >
112 |                     <path
113 |                       strokeLinecap="round"
114 |                       strokeLinejoin="round"
115 |                       strokeWidth={2}
116 |                       d="M9 14l6-6m-5.5.5h.01m4.99 5h.01M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16l3.5-2 3.5 2 3.5-2 3.5 2zM10 8.5a.5.5 0 11-1 0 .5.5 0 011 0zm5 5a.5.5 0 11-1 0 .5.5 0 011 0z"
117 |                     />
118 |                   </svg>
119 |                   DO YOU HAVE PROMO CODE?
120 |                 </div>
121 | 
122 |                 <div className="text-sm pt-1 font-semibold pb-2 border-b border-cusblack flex justify-between place-items-center">
123 |                   <p className="">SUBTOTAL</p>
124 |                   <NumberFormat
125 |                     value={items.reduce(
126 |                       (val, item) => val + item.price * item.quantity,
127 |                       0
128 |                     )}
129 |                     displayType={"text"}
130 |                     thousandSeparator={true}
131 |                     prefix={"Rp"}
132 |                     renderText={(value, props) => <p {...props}>{value}</p>}
133 |                   />
134 |                 </div>
135 | 
136 |                 <div className="my-3 border-b border-cusblack pb-2">
137 |                   {items.map((item, idx) => (
138 |                     <div
139 |                       key={idx}
140 |                       className="flex justify-between place-items-center text-sm mb-1"
141 |                     >
142 |                       <p className="pr-3">{item.name}</p>
143 |                       <NumberFormat
144 |                         value={item.price * item.quantity}
145 |                         displayType={"text"}
146 |                         thousandSeparator={true}
147 |                         prefix={"Rp"}
148 |                         renderText={(value, props) => <p {...props}>{value}</p>}
149 |                       />
150 |                     </div>
151 |                   ))}
152 |                   <div className="flex justify-between place-items-center text-sm mb-1">
153 |                     <p>TAX</p>
154 |                     <p>FREE</p>
155 |                   </div>
156 |                 </div>
157 | 
158 |                 <div className="flex justify-between place-items-center font-semibold">
159 |                   <p>TOTAL</p>
160 |                   <NumberFormat
161 |                     value={items.reduce(
162 |                       (val, item) => val + item.price * item.quantity,
163 |                       0
164 |                     )}
165 |                     displayType={"text"}
166 |                     thousandSeparator={true}
167 |                     prefix={"Rp"}
168 |                     renderText={(value, props) => <p {...props}>{value}</p>}
169 |                   />
170 |                 </div>
171 | 
172 |                 <button
173 |                   disabled={!items.length}
174 |                   onClick={createCheckoutSession}
175 |                   className="py-2 px-3 disabled:cursor-not-allowed text-white w-full mt-6 rounded-lg bg-cusblack "
176 |                 >
177 |                   {!loading ? (
178 |                     <span className="flex justify-center place-items-center">
179 |                       CHECKOUT
180 |                       <svg
181 |                         className="ml-2 w-4 h-4 text-white"
182 |                         fill="none"
183 |                         stroke="currentColor"
184 |                         viewBox="0 0 24 24"
185 |                         xmlns="http://www.w3.org/2000/svg"
186 |                       >
187 |                         <path
188 |                           strokeLinecap="round"
189 |                           strokeLinejoin="round"
190 |                           strokeWidth={2}
191 |                           d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
192 |                         />
193 |                       </svg>
194 |                     </span>
195 |                   ) : (
196 |                     <img
197 |                       className="w-6 h-6 mx-auto"
198 |                       src="https://i.ibb.co/pL1TJSg/Rolling-1s-200px-2.gif"
199 |                       alt=""
200 |                     />
201 |                   )}
202 |                 </button>
203 |               </div>
204 |             </div>
205 |           </div>
206 |         </div>
207 |       </div>
208 |     </>
209 |   );
210 | }
211 | 
212 | export default Basket;
213 | 


--------------------------------------------------------------------------------
/pages/product/[slug].js:
--------------------------------------------------------------------------------
  1 | import React, { useEffect, useState } from "react";
  2 | import Header from "../../components/header";
  3 | import NumberFormat from "react-number-format";
  4 | import Link from "next/link";
  5 | import { motion } from "framer-motion";
  6 | import { useDispatch } from "react-redux";
  7 | import { addToBasket } from "../../slices/basketSlice";
  8 | import NotFound from "../404";
  9 | import { addToWishlist } from "../../slices/wishlistSlice";
 10 | import ProductCard from "../../components/productcard";
 11 | import Head from "next/head";
 12 | 
 13 | function Product({ dataItem, dataAlso }) {
 14 |   const [selectedSize, setSelectedSize] = useState(0);
 15 |   const dispatch = useDispatch();
 16 |   const [imgSelected, setImgSelected] = useState(0);
 17 | 
 18 |   if (!dataItem || !dataAlso) return <NotFound />;
 19 | 
 20 |   return (
 21 |     <>
 22 |       <Head>
 23 |         <title>{dataItem.name}</title>
 24 |       </Head>
 25 |       <div className="bg-cusgray min-h-screen pb-10">
 26 |         <Header />
 27 |         <div className="max-w-4xl mx-auto min-h-screen pt-16">
 28 |           <div className="flex justify-between place-items-center py-4 px-1 mb-4">
 29 |             <Link href="/shop">
 30 |               <div className="w-9 h-9 shadow-lg bg-white text-cusblack hover:bg-cusblack hover:text-white duration-200 cursor-pointer rounded-full flex justify-center place-items-center">
 31 |                 <svg
 32 |                   className="w-4 h-4 "
 33 |                   fill="none"
 34 |                   stroke="currentColor"
 35 |                   viewBox="0 0 24 24"
 36 |                   xmlns="http://www.w3.org/2000/svg"
 37 |                 >
 38 |                   <path
 39 |                     strokeLinecap="round"
 40 |                     strokeLinejoin="round"
 41 |                     strokeWidth={2}
 42 |                     d="M15 19l-7-7 7-7"
 43 |                   />
 44 |                 </svg>
 45 |               </div>
 46 |             </Link>
 47 |             <h4 className="text-cusblack text-md">Product Details</h4>
 48 |             <div className="w-8"></div>
 49 |           </div>
 50 | 
 51 |           <div className="w-full bg-white md:rounded-2xl shadow-lg md:py-8 md:px-10 md:flex overflow-hidden">
 52 |             <div className="photo md:w-1/3">
 53 |               <div>
 54 |                 <img
 55 |                   className=" h-60 object-cover w-full md:rounded-2xl"
 56 |                   src={dataItem.prop[0].image[imgSelected]}
 57 |                   alt=""
 58 |                 />
 59 |               </div>
 60 |               <div className="px-2 md:px-0 flex mt-4">
 61 |                 {dataItem.prop[0].image.map((img, idx) => (
 62 |                   <img
 63 |                     key={idx}
 64 |                     src={img}
 65 |                     onClick={() => setImgSelected(idx)}
 66 |                     className={`${
 67 |                       imgSelected == idx
 68 |                         ? `border-2 border-cusblack filter brightness-90 `
 69 |                         : ``
 70 |                     } md:w-14 md:h-14 h-16 w-16 rounded-xl object-cover mr-3 cursor-pointer duration-100 `}
 71 |                     alt=""
 72 |                   />
 73 |                 ))}
 74 |               </div>
 75 |             </div>
 76 |             <div className="detail px-2 md:px-0 mt-3 md:mt-0 md:ml-6 py-2 md:w-2/3">
 77 |               <p className="flex place-items-center text-sm text-gray-400">
 78 |                 {dataItem.type.name}
 79 |                 <span className="mx-1">
 80 |                   <svg
 81 |                     className="w-4 h-4"
 82 |                     fill="currentColor"
 83 |                     viewBox="0 0 20 20"
 84 |                     xmlns="http://www.w3.org/2000/svg"
 85 |                   >
 86 |                     <path
 87 |                       fillRule="evenodd"
 88 |                       d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
 89 |                       clipRule="evenodd"
 90 |                     />
 91 |                   </svg>
 92 |                 </span>
 93 |                 {dataItem.category.name}
 94 |               </p>
 95 |               <h1 className="text-3xl text-cusblack font-medium my-3">
 96 |                 {dataItem.name}
 97 |               </h1>
 98 |               <p className="text-sm text-gray-400">{dataItem.color}</p>
 99 |               <NumberFormat
100 |                 value={dataItem.price}
101 |                 className="my-3 font-semibold text-lg text-cusblack"
102 |                 displayType={"text"}
103 |                 thousandSeparator={true}
104 |                 prefix={"Rp"}
105 |                 renderText={(value, props) => (
106 |                   <p className="text-sm font-semibold" {...props}>
107 |                     {value}
108 |                   </p>
109 |                 )}
110 |               />
111 |               <div className="sizes text-sm text-gray-400">
112 |                 <p className="mb-2">Select size</p>
113 |                 <div className="flex">
114 |                   {dataItem.prop[0].size.map((size, idx) => (
115 |                     <button
116 |                       onClick={() => setSelectedSize(idx)}
117 |                       key={idx}
118 |                       className={`${
119 |                         selectedSize === idx
120 |                           ? `bg-cusblack text-white`
121 |                           : `text-cusblack border border-cusblack`
122 |                       } mr-2 duration-200 flex place-items-center justify-center rounded-full w-12 h-12 cursor-pointer hover:bg-cusblack hover:text-white`}
123 |                     >
124 |                       {size}
125 |                     </button>
126 |                   ))}
127 |                 </div>
128 |               </div>
129 |               <div className="buttoncart flex mt-5 w-full">
130 |                 <button
131 |                   onClick={() => {
132 |                     dispatch(
133 |                       addToBasket({
134 |                         ...dataItem,
135 |                         selectedSizeProp: dataItem.prop[0].size[selectedSize],
136 |                       })
137 |                     );
138 |                   }}
139 |                   className="w-4/5 md:w-3/5 bg-cusblack overflow-hidden py-4 text-white rounded-lg text-sm active:bg-gray-800 duration-100"
140 |                 >
141 |                   <motion.span
142 |                     initial={{ y: -100 }}
143 |                     animate={{ y: 0 }}
144 |                     className="flex justify-center place-items-center overflow-hidden"
145 |                   >
146 |                     Add to basket
147 |                     <span>
148 |                       <svg
149 |                         className="ml-2 w-5 h-5"
150 |                         fill="currentColor"
151 |                         viewBox="0 0 20 20"
152 |                         xmlns="http://www.w3.org/2000/svg"
153 |                       >
154 |                         <path d="M3 1a1 1 0 000 2h1.22l.305 1.222a.997.997 0 00.01.042l1.358 5.43-.893.892C3.74 11.846 4.632 14 6.414 14H15a1 1 0 000-2H6.414l1-1H14a1 1 0 00.894-.553l3-6A1 1 0 0017 3H6.28l-.31-1.243A1 1 0 005 1H3zM16 16.5a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM6.5 18a1.5 1.5 0 100-3 1.5 1.5 0 000 3z" />
155 |                       </svg>
156 |                     </span>
157 |                   </motion.span>
158 |                 </button>
159 |                 <button
160 |                   onClick={() => dispatch(addToWishlist(item))}
161 |                   className="w-1/5 ml-2 bg-white border border-cusblack py-4 text-cusblack rounded-lg text-sm"
162 |                 >
163 |                   <svg
164 |                     className="w-5 h-5 m-auto"
165 |                     fill="none"
166 |                     stroke="currentColor"
167 |                     viewBox="0 0 24 24"
168 |                     xmlns="http://www.w3.org/2000/svg"
169 |                   >
170 |                     <path
171 |                       strokeLinecap="round"
172 |                       strokeLinejoin="round"
173 |                       strokeWidth={2}
174 |                       d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"
175 |                     />
176 |                   </svg>
177 |                 </button>
178 |               </div>
179 |             </div>
180 |           </div>
181 | 
182 |           <div className="text-cusblack p-2 md:px-10 md:py-6 mt-14 bg-white md:rounded-2xl shadow-lg">
183 |             <p className="mb-4 font-medium text-lg">You may also like:</p>
184 |             <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-4 gap-x-4 gap-y-6">
185 |               {dataAlso
186 |                 .filter((it, idx) => it.name != dataItem.name)
187 |                 .map((data, idx) => {
188 |                   if (idx < 4)
189 |                     return <ProductCard key={data.slug} item={data} />;
190 |                 })}
191 |             </div>
192 |           </div>
193 |         </div>
194 |       </div>
195 |     </>
196 |   );
197 | }
198 | 
199 | export async function getStaticPaths() {
200 |   const res = await fetch(process.env.NEXT_PUBLIC_APIURL + "/items");
201 |   const data = await res.json();
202 | 
203 |   const paths = data.map((cat) => ({
204 |     params: { slug: cat.slug },
205 |   }));
206 | 
207 |   return {
208 |     paths,
209 |     fallback: true,
210 |   };
211 | }
212 | 
213 | export async function getStaticProps({ params }) {
214 |   const { slug } = params;
215 |   const res = await fetch(
216 |     process.env.NEXT_PUBLIC_APIURL + `/items?slug=${slug}`
217 |   );
218 |   const data = await res.json();
219 |   const dataItem = data[0];
220 |   const resAlso = await fetch(
221 |     process.env.NEXT_PUBLIC_APIURL +
222 |       `/items?category.slug=${dataItem?.category.slug}`
223 |   );
224 |   const dataAlso = await resAlso.json();
225 | 
226 |   if (!data.length) {
227 |     return {
228 |       redirect: {
229 |         destination: "/shop",
230 |         permanent: false,
231 |       },
232 |     };
233 |   }
234 | 
235 |   return {
236 |     props: {
237 |       dataItem,
238 |       dataAlso,
239 |     },
240 |     revalidate: 5,
241 |   };
242 | }
243 | 
244 | export default Product;
245 | 


--------------------------------------------------------------------------------
/components/header.js:
--------------------------------------------------------------------------------
  1 | import Link from "next/link";
  2 | import React, { useEffect, useState } from "react";
  3 | import { useSelector } from "react-redux";
  4 | import { selectItems } from "../slices/basketSlice";
  5 | import { selectWishItems } from "../slices/wishlistSlice";
  6 | import MenuNav from "./menunav";
  7 | import nookies from "nookies";
  8 | import { useRouter } from "next/dist/client/router";
  9 | import { destroyCookie } from "nookies";
 10 | 
 11 | function Header() {
 12 |   const router = useRouter();
 13 |   const data = useSelector(selectItems);
 14 |   const [items, setItems] = useState([]);
 15 |   const dataWish = useSelector(selectWishItems);
 16 |   const [wish, setWish] = useState([]);
 17 |   const [open, setOpen] = useState(false);
 18 |   const [cookie, setCookie] = useState({});
 19 |   useEffect(() => {
 20 |     const dataCookie = nookies.get();
 21 |     try {
 22 |       setItems(data);
 23 |       setWish(dataWish);
 24 |       setCookie(JSON.parse(dataCookie.user));
 25 |     } catch (err) {
 26 |       setCookie(dataCookie.user);
 27 |     }
 28 |   }, [data, dataWish]);
 29 |   const [isOpen, setIsOpen] = useState(false);
 30 |   const handleOpen = () => {
 31 |     setIsOpen(!isOpen);
 32 |   };
 33 |   const signOut = () => {
 34 |     destroyCookie(null, "token");
 35 |     destroyCookie(null, "user");
 36 |     router.replace("/login");
 37 |   };
 38 |   return (
 39 |     <nav className="w-full mx-auto fixed bg-cusgray z-30 py-2 md:px-0 duration-200">
 40 |       <div className="px-2 navtop relative max-w-6xl mx-auto flex justify-between place-items-center py-1.5">
 41 |         <div className="burger flex items-center">
 42 |           <button onClick={handleOpen}>
 43 |             <svg
 44 |               className="w-7 h-7 text-cusblack"
 45 |               fill="currentColor"
 46 |               viewBox="0 0 20 20"
 47 |               xmlns="http://www.w3.org/2000/svg"
 48 |             >
 49 |               <path
 50 |                 fillRule="evenodd"
 51 |                 d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM9 15a1 1 0 011-1h6a1 1 0 110 2h-6a1 1 0 01-1-1z"
 52 |                 clipRule="evenodd"
 53 |               />
 54 |             </svg>
 55 |           </button>
 56 |           <h3 className="hidden md:inline text-md mr-2 font-semibold ml-3 text-cusblack">
 57 |             wefootwear
 58 |           </h3>
 59 |         </div>
 60 |         <div className="profile flex items-center place-items-center">
 61 |           <Link href="/shop">
 62 |             <div className="w-8 relative flex items-center h-8 mr-1 rounded-full hover:bg-gray-200 active:bg-gray-300 cursor-pointer duration-200">
 63 |               <svg
 64 |                 className="w-6 h-6 text-cusblack m-auto"
 65 |                 fill="none"
 66 |                 stroke="currentColor"
 67 |                 viewBox="0 0 24 24"
 68 |                 xmlns="http://www.w3.org/2000/svg"
 69 |               >
 70 |                 <path
 71 |                   strokeLinecap="round"
 72 |                   strokeLinejoin="round"
 73 |                   strokeWidth={2}
 74 |                   d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"
 75 |                 />
 76 |               </svg>
 77 |             </div>
 78 |           </Link>
 79 |           <div
 80 |             onClick={() => router.push("/basket")}
 81 |             className="w-8 relative flex items-center h-8 mr-1 rounded-full hover:bg-gray-200 active:bg-gray-300 cursor-pointer duration-200"
 82 |           >
 83 |             <svg
 84 |               className="w-6 h-6 text-cusblack m-auto"
 85 |               fill="none"
 86 |               stroke="currentColor"
 87 |               viewBox="0 0 24 24"
 88 |               xmlns="http://www.w3.org/2000/svg"
 89 |             >
 90 |               <path
 91 |                 strokeLinecap="round"
 92 |                 strokeLinejoin="round"
 93 |                 strokeWidth={2}
 94 |                 d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"
 95 |               />
 96 |             </svg>
 97 |             {items.length > 0 ? (
 98 |               <div
 99 |                 className={`flex
100 |                 } absolute text-xs font-light justify-center text-white text-center w-4 h-4 bg-cusblack rounded-full bottom-0 right-0`}
101 |               >
102 |                 {items.reduce((a, item) => a + item.quantity, 0)}
103 |               </div>
104 |             ) : (
105 |               ""
106 |             )}
107 |           </div>
108 |           <Link href="/wishlist">
109 |             <div className="w-8 relative flex items-center h-8 mr-1 rounded-full hover:bg-gray-200 active:bg-gray-300 cursor-pointer duration-200">
110 |               <svg
111 |                 className="w-6 m-auto h-6 text-cusblack"
112 |                 fill="none"
113 |                 stroke="currentColor"
114 |                 viewBox="0 0 24 24"
115 |                 xmlns="http://www.w3.org/2000/svg"
116 |               >
117 |                 <path
118 |                   strokeLinecap="round"
119 |                   strokeLinejoin="round"
120 |                   strokeWidth={2}
121 |                   d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"
122 |                 />
123 |               </svg>
124 |               {wish.length > 0 ? (
125 |                 <div
126 |                   className={`flex
127 |                 absolute text-xs font-light justify-center text-white text-center w-4 h-4 bg-cusblack rounded-full bottom-0 right-0`}
128 |                 >
129 |                   {wish.length}
130 |                 </div>
131 |               ) : (
132 |                 ""
133 |               )}
134 |             </div>
135 |           </Link>
136 | 
137 |           {cookie && (
138 |             <div
139 |               onClick={() => router.push("/orders")}
140 |               className="w-8 relative flex items-center h-8 mr-1 rounded-full hover:bg-gray-200 active:bg-gray-300 cursor-pointer duration-200"
141 |             >
142 |               <svg
143 |                 className="w-6 m-auto h-6 text-cusblack"
144 |                 fill="none"
145 |                 stroke="currentColor"
146 |                 viewBox="0 0 24 24"
147 |                 xmlns="http://www.w3.org/2000/svg"
148 |               >
149 |                 <path
150 |                   strokeLinecap="round"
151 |                   strokeLinejoin="round"
152 |                   strokeWidth={2}
153 |                   d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"
154 |                 />
155 |               </svg>
156 |             </div>
157 |           )}
158 | 
159 |           <button
160 |             onClick={() => setOpen(!open)}
161 |             className="w-8 relative flex items-center h-8 rounded-full hover:bg-gray-200 active:bg-gray-300 cursor-pointer duration-200"
162 |           >
163 |             <svg
164 |               className="w-6 m-auto h-6 text-cusblack"
165 |               fill="none"
166 |               stroke="currentColor"
167 |               viewBox="0 0 24 24"
168 |               xmlns="http://www.w3.org/2000/svg"
169 |             >
170 |               <path
171 |                 strokeLinecap="round"
172 |                 strokeLinejoin="round"
173 |                 strokeWidth={2}
174 |                 d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
175 |               />
176 |             </svg>
177 |             {open && (
178 |               <div className="p-3 bg-white absolute top-11 leading-relaxed right-0 rounded-lg shadow-lg text-xs text-cusblack">
179 |                 {cookie && (
180 |                   <div className="bg-cusblack text-white p-3 rounded-lg">
181 |                     <ul className="text-left w-28">
182 |                       <li className="line-clamp-1">{cookie.username}</li>
183 |                       <li className="line-clamp-1">{cookie.email}</li>
184 |                     </ul>
185 |                   </div>
186 |                 )}
187 |                 {cookie && (
188 |                   <div
189 |                     onClick={signOut}
190 |                     className="hover:underline mt-2 flex place-items-center justify-end"
191 |                   >
192 |                     <span>
193 |                       <svg
194 |                         className="w-6 h-6 text-cusblack"
195 |                         fill="none"
196 |                         stroke="currentColor"
197 |                         viewBox="0 0 24 24"
198 |                         xmlns="http://www.w3.org/2000/svg"
199 |                       >
200 |                         <path
201 |                           strokeLinecap="round"
202 |                           strokeLinejoin="round"
203 |                           strokeWidth={2}
204 |                           d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"
205 |                         />
206 |                       </svg>
207 |                     </span>
208 |                     Sign out
209 |                   </div>
210 |                 )}
211 |                 {!cookie && (
212 |                   <Link href="/login">
213 |                     <div className="hover:underline flex place-items-center">
214 |                       <span>
215 |                         <svg
216 |                           className="w-6 h-6 text-cusblack"
217 |                           fill="none"
218 |                           stroke="currentColor"
219 |                           viewBox="0 0 24 24"
220 |                           xmlns="http://www.w3.org/2000/svg"
221 |                         >
222 |                           <path
223 |                             strokeLinecap="round"
224 |                             strokeLinejoin="round"
225 |                             strokeWidth={2}
226 |                             d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1"
227 |                           />
228 |                         </svg>
229 |                       </span>{" "}
230 |                       Sign In
231 |                     </div>
232 |                   </Link>
233 |                 )}
234 |               </div>
235 |             )}
236 |           </button>
237 |         </div>
238 |       </div>
239 | 
240 |       <MenuNav handleOpen={handleOpen} isOpen={isOpen} />
241 |     </nav>
242 |   );
243 | }
244 | 
245 | export default Header;
246 | 


--------------------------------------------------------------------------------
/app/data.json:
--------------------------------------------------------------------------------
  1 | [
  2 |   {
  3 |     "_id": "61190d98cd0bde22e8960771",
  4 |     "name": "Adidas Superstar 20s",
  5 |     "slug": "adidas-superstar-20s",
  6 |     "color": "Black/White",
  7 |     "price": "1249000",
  8 |     "published_at": "2021-08-15T12:50:35.569Z",
  9 |     "createdAt": "2021-08-15T12:50:32.330Z",
 10 |     "updatedAt": "2021-08-17T23:49:55.279Z",
 11 |     "__v": 0,
 12 |     "id": "61190d98cd0bde22e8960771",
 13 |     "category": "Adidas",
 14 |     "type": "Shoes",
 15 |     "images": [
 16 |       "https://i.ibb.co/5vBY1FM/Superstar-Shoes-Black-EG4959-01-standard.jpg",
 17 |       "https://i.ibb.co/C9fXhC1/OIP-1.jpg"
 18 |     ]
 19 |   },
 20 |   {
 21 |     "_id": "611a4d38666787300c2e18ff",
 22 |     "name": "Adidas Ultraboost DNA x LEGO",
 23 |     "slug": "adidas-ultraboost-dna-x-lego",
 24 |     "color": "White/Yellow",
 25 |     "price": "2199000",
 26 |     "published_at": "2021-08-16T11:34:19.821Z",
 27 |     "createdAt": "2021-08-16T11:34:16.949Z",
 28 |     "updatedAt": "2021-08-16T11:34:19.951Z",
 29 |     "__v": 0,
 30 |     "id": "611a4d38666787300c2e18ff",
 31 |     "category": "Adidas",
 32 |     "type": "Shoes",
 33 |     "images": [
 34 |       "https://i.ibb.co/ft6R5Rf/adidas-Ultraboost-DNA-x-LEGO-r-Plates-Shoes-White-FY7690.jpg",
 35 |       "https://i.ibb.co/g9FwRFd/adidas-Ultra-Boost-DNA-Lego-FY7690-release-date-raffle-list-6-600x600.jpg"
 36 |     ]
 37 |   },
 38 |   {
 39 |     "_id": "611a710e666787300c2e1900",
 40 |     "name": "Air Jordan 1 Retro OG Satin Black Toe",
 41 |     "slug": "air-jordan-1-retro-og-satin-black-toe",
 42 |     "price": "6999000",
 43 |     "color": "White/Black/Red",
 44 |     "published_at": "2021-08-16T14:07:19.440Z",
 45 |     "createdAt": "2021-08-16T14:07:10.510Z",
 46 |     "updatedAt": "2021-08-16T14:49:01.582Z",
 47 |     "__v": 0,
 48 |     "id": "611a710e666787300c2e1900",
 49 |     "category": "Nike product",
 50 |     "type": "Shoes",
 51 |     "images": [
 52 |       "https://i.ibb.co/z28xGS6/R-1.jpg",
 53 |       "https://i.ibb.co/2ZkVjq7/OIP.jpg"
 54 |     ]
 55 |   },
 56 |   {
 57 |     "_id": "611a740b666787300c2e1901",
 58 |     "name": "Converse High Chuck Taylor",
 59 |     "slug": "converse-high-chuck-taylor",
 60 |     "color": "Black/White",
 61 |     "price": "749000",
 62 |     "published_at": "2021-08-16T14:19:58.347Z",
 63 |     "createdAt": "2021-08-16T14:19:55.713Z",
 64 |     "updatedAt": "2021-08-16T14:19:58.468Z",
 65 |     "__v": 0,
 66 |     "id": "611a740b666787300c2e1901",
 67 |     "category": "Converse",
 68 |     "type": "Shoes",
 69 |     "images": [
 70 |       "https://i.ibb.co/f2TjY6M/159575-C-A-107-X1.jpg",
 71 |       "https://i.ibb.co/5jkPCdZ/13604756-1-black.jpg"
 72 |     ]
 73 |   },
 74 |   {
 75 |     "_id": "611a79e3666787300c2e1902",
 76 |     "name": "Nike Winter Jacket Black Men",
 77 |     "slug": "nike-winter-jacket-black-men",
 78 |     "color": "Black",
 79 |     "price": "1199000",
 80 |     "published_at": "2021-08-16T14:46:11.598Z",
 81 |     "createdAt": "2021-08-16T14:44:51.880Z",
 82 |     "updatedAt": "2021-08-16T14:46:11.710Z",
 83 |     "__v": 0,
 84 |     "id": "611a79e3666787300c2e1902",
 85 |     "category": "Nike product",
 86 |     "type": "Jacket and Hoodie",
 87 |     "images": [
 88 |       "https://i.ibb.co/2SkD2CK/nike-Padded-Down-Jacket.jpg"
 89 |     ]
 90 |   },
 91 |   {
 92 |     "_id": "611c4bcd9c72d22a449950e5",
 93 |     "name": "Puma Mens Red Trainers",
 94 |     "slug": "puma-mens-red-trainers",
 95 |     "color": "Red/White",
 96 |     "price": "949000",
 97 |     "published_at": "2021-08-17T23:56:12.469Z",
 98 |     "createdAt": "2021-08-17T23:52:45.773Z",
 99 |     "updatedAt": "2021-08-18T05:24:47.632Z",
100 |     "__v": 0,
101 |     "id": "611c4bcd9c72d22a449950e5",
102 |     "category": "Puma",
103 |     "type": "Shoes",
104 |     "images": [
105 |       "https://i.ibb.co/tcqZQY8/OIP-2-removebg-preview.jpg",
106 |       "https://i.ibb.co/wwH8w7h/t6a8580-4-removebg-preview.jpg"
107 |     ]
108 |   },
109 |   {
110 |     "_id": "611c94b8ce9f030016e2b11b",
111 |     "name": "Puma Wmns Dare Black",
112 |     "slug": "puma-wmns-dare-black",
113 |     "price": "1299000",
114 |     "color": "Black/White",
115 |     "published_at": "2021-08-18T05:05:02.984Z",
116 |     "createdAt": "2021-08-18T05:03:52.796Z",
117 |     "updatedAt": "2021-08-18T05:15:17.458Z",
118 |     "__v": 0,
119 |     "id": "611c94b8ce9f030016e2b11b",
120 |     "category": "Puma",
121 |     "type": "Shoes",
122 |     "images": [
123 |       "https://i.ibb.co/jGk9NgZ/363699-01-1-removebg-preview-1.jpg",
124 |       "https://i.ibb.co/X5x250X/363699-01-2-removebg-preview-1.jpg"
125 |     ]
126 |   },
127 |   {
128 |     "_id": "611c9809ce9f030016e2b11c",
129 |     "name": "Adidas Trefoil Classic Cap Black",
130 |     "slug": "adidas-trefoil-classic-cap-black",
131 |     "color": "Black/White",
132 |     "price": "449000",
133 |     "published_at": "2021-08-18T05:19:43.746Z",
134 |     "createdAt": "2021-08-18T05:18:01.891Z",
135 |     "updatedAt": "2021-08-18T05:19:44.291Z",
136 |     "__v": 0,
137 |     "id": "611c9809ce9f030016e2b11c",
138 |     "category": "Adidas",
139 |     "type": "Caps and Hats",
140 |     "images": [
141 |       "https://i.ibb.co/THd21hk/14be5d24-c54a-4e3f-8dae-78585f0e44db-jpg.webp",
142 |       "https://i.ibb.co/6smt1p1/3ec19b76-d669-4dcd-a25d-0979109c8f81-jpg.webp"
143 |     ]
144 |   },
145 |   {
146 |     "_id": "6128fe5d8ebb4b0016cf2eaf",
147 |     "name": "England 2021 Jersey",
148 |     "slug": "england-2021-jersey",
149 |     "color": "White",
150 |     "price": "799000",
151 |     "published_at": "2021-08-27T15:01:58.345Z",
152 |     "createdAt": "2021-08-27T15:01:49.868Z",
153 |     "updatedAt": "2021-08-27T15:01:58.902Z",
154 |     "__v": 0,
155 |     "id": "6128fe5d8ebb4b0016cf2eaf",
156 |     "category": "Nike product",
157 |     "type": "Jerseys and Kits",
158 |     "images": [
159 |       "https://i.ibb.co/DMDvh5N/47c105c8-4ae1-41bf-9818-b902239fc085.webp",
160 |       "https://i.ibb.co/Z1kSGJm/data-jpeg.webp"
161 |     ]
162 |   },
163 |   {
164 |     "_id": "6128ffbf8ebb4b0016cf2eb0",
165 |     "name": "NB Basic T-shirt",
166 |     "slug": "nb-basic-t-shirt",
167 |     "color": "Navy",
168 |     "price": "299000",
169 |     "published_at": "2021-08-27T15:07:49.471Z",
170 |     "createdAt": "2021-08-27T15:07:43.810Z",
171 |     "updatedAt": "2021-08-27T15:07:50.018Z",
172 |     "__v": 0,
173 |     "id": "6128ffbf8ebb4b0016cf2eb0",
174 |     "category": "New balance",
175 |     "type": "T-shirt",
176 |     "images": [
177 |       "https://i.ibb.co/sJX2Tj0/mt03203bk-nb-70-i.webp",
178 |       "https://i.ibb.co/0QrFtGX/mt03203ecl-nb-40-i.webp"
179 |     ]
180 |   },
181 |   {
182 |     "_id": "612da23bfa2eca0016d1836e",
183 |     "name": "Nike Air Jordan 2 Retro Wing It",
184 |     "slug": "nike-air-jordan-2-retro-wing-it",
185 |     "color": "White/Black",
186 |     "price": "6999000",
187 |     "published_at": "2021-08-31T03:30:12.003Z",
188 |     "createdAt": "2021-08-31T03:30:03.156Z",
189 |     "updatedAt": "2022-03-22T08:52:25.931Z",
190 |     "__v": 0,
191 |     "id": "612da23bfa2eca0016d1836e",
192 |     "category": "Nike product",
193 |     "type": "Shoes",
194 |     "images": [
195 |       "https://i.ibb.co/qxfYHg4/a4c94814c81010c5f956269526486fa3-crop-exact.jpg",
196 |       "https://i.ibb.co/Lv3SvQs/Nike-Air-Jordan-2-Retro-Wing-It-06-coolsneakers.jpg"
197 |     ]
198 |   },
199 |   {
200 |     "_id": "612da319fa2eca0016d1836f",
201 |     "name": "Nike Wristbands Navy",
202 |     "slug": "nike-wristbands-navy",
203 |     "color": "Navy/White",
204 |     "price": "149000",
205 |     "published_at": "2021-08-31T03:33:54.417Z",
206 |     "createdAt": "2021-08-31T03:33:45.254Z",
207 |     "updatedAt": "2021-08-31T03:33:54.967Z",
208 |     "__v": 0,
209 |     "id": "612da319fa2eca0016d1836f",
210 |     "category": "Nike product",
211 |     "type": "Accessories",
212 |     "images": [
213 |       "https://i.ibb.co/YRcwt2Z/OIP.jpg",
214 |       "https://i.ibb.co/gwSYGcp/174831.jpg"
215 |     ]
216 |   },
217 |   {
218 |     "_id": "612da423fa2eca0016d18370",
219 |     "name": "Converse CDG White",
220 |     "slug": "converse-cdg-white",
221 |     "color": "White/Red",
222 |     "price": "1799000",
223 |     "published_at": "2021-08-31T03:38:20.543Z",
224 |     "createdAt": "2021-08-31T03:38:11.895Z",
225 |     "updatedAt": "2021-08-31T03:38:21.095Z",
226 |     "__v": 0,
227 |     "id": "612da423fa2eca0016d18370",
228 |     "category": "Converse",
229 |     "type": "Shoes",
230 |     "images": [
231 |       "https://i.ibb.co/K2D1VbZ/OIP-1.jpg",
232 |       "https://i.ibb.co/gV1BjWP/cdg.jpg"
233 |     ]
234 |   },
235 |   {
236 |     "_id": "612da4b7fa2eca0016d18371",
237 |     "name": "Converse CDG Low Black",
238 |     "slug": "converse-cdg-low-black",
239 |     "color": "Black/Red",
240 |     "price": "1649000",
241 |     "published_at": "2021-08-31T03:40:44.382Z",
242 |     "createdAt": "2021-08-31T03:40:39.186Z",
243 |     "updatedAt": "2021-08-31T03:40:44.948Z",
244 |     "__v": 0,
245 |     "id": "612da4b7fa2eca0016d18371",
246 |     "category": "Converse",
247 |     "type": "Shoes",
248 |     "images": [
249 |       "https://i.ibb.co/WxVtybN/1553480-165cf094-4df7-4e8f-a54b-c5a4d912cfa1-1364-1364.jpg",
250 |       "https://i.ibb.co/C2jd5Nc/OIP-3.jpg"
251 |     ]
252 |   },
253 |   {
254 |     "_id": "612da558fa2eca0016d18372",
255 |     "name": "Converse Core Poly Fill Jacket",
256 |     "slug": "converse-core-poly-fill-jacket",
257 |     "color": "Black",
258 |     "price": "2399000",
259 |     "published_at": "2021-08-31T03:43:25.419Z",
260 |     "createdAt": "2021-08-31T03:43:20.213Z",
261 |     "updatedAt": "2021-08-31T03:43:25.972Z",
262 |     "__v": 0,
263 |     "id": "612da558fa2eca0016d18372",
264 |     "category": "Converse",
265 |     "type": "Jacket and Hoodie",
266 |     "images": [
267 |       "https://i.ibb.co/pwwxyg1/converse-blue-Core-Poly-Fill-Jacket-Mens-Jacket-In-Blue.jpg",
268 |       "https://i.ibb.co/3h7HW2K/converse-blue-Core-Poly-Fill-Jacket-Mens-Jacket-In-Blue-1.jpg"
269 |     ]
270 |   },
271 |   {
272 |     "_id": "612da85afa2eca0016d18373",
273 |     "name": "Converse Jacket With Baseball Collar",
274 |     "slug": "converse-jacket-with-baseball-collar",
275 |     "color": "Gray/Navy",
276 |     "price": "629000",
277 |     "published_at": "2021-08-31T03:56:16.379Z",
278 |     "createdAt": "2021-08-31T03:56:10.500Z",
279 |     "updatedAt": "2021-08-31T03:56:16.929Z",
280 |     "__v": 0,
281 |     "id": "612da85afa2eca0016d18373",
282 |     "category": "Converse",
283 |     "type": "Jacket and Hoodie",
284 |     "images": [
285 |       "https://i.ibb.co/gtPQ70z/OIP-4.jpg"
286 |     ]
287 |   },
288 |   {
289 |     "_id": "612da908fa2eca0016d18374",
290 |     "name": "Puma Infants Suede Pink Lady",
291 |     "slug": "puma-infants-suede-pink-lady",
292 |     "color": "Pink/White",
293 |     "price": "899000",
294 |     "published_at": "2021-08-31T03:59:10.204Z",
295 |     "createdAt": "2021-08-31T03:59:04.856Z",
296 |     "updatedAt": "2021-08-31T03:59:10.768Z",
297 |     "__v": 0,
298 |     "id": "612da908fa2eca0016d18374",
299 |     "category": "Puma",
300 |     "type": "Shoes",
301 |     "images": [
302 |       "https://i.ibb.co/GC5ZDtZ/137294.jpg",
303 |       "https://i.ibb.co/10Ldm9f/R-1.jpg"
304 |     ]
305 |   },
306 |   {
307 |     "_id": "612daa8ffa2eca0016d18375",
308 |     "name": "Adidas zx4000 Retro",
309 |     "slug": "adidas-zx4000-retro",
310 |     "color": "White/Blue",
311 |     "price": "4999000",
312 |     "published_at": "2021-08-31T04:05:45.659Z",
313 |     "createdAt": "2021-08-31T04:05:35.300Z",
314 |     "updatedAt": "2021-08-31T04:05:46.210Z",
315 |     "__v": 0,
316 |     "id": "612daa8ffa2eca0016d18375",
317 |     "category": "Adidas",
318 |     "type": "Shoes",
319 |     "images": [
320 |       "https://i.ibb.co/YbJCVcy/5861d4b11ce77ca813ef9ab8750af226.jpg",
321 |       "https://i.ibb.co/dsZY7Cj/adidas-zx-roots-running-exhibition-london-2-320x205.jpg"
322 |     ]
323 |   },
324 |   {
325 |     "_id": "612dab85fa2eca0016d18376",
326 |     "name": "Adidas London Half-zip Overhead Jacket",
327 |     "slug": "adidas-london-half-zip-overhead-jacket",
328 |     "color": "Navy/White",
329 |     "price": "1199000",
330 |     "published_at": "2021-08-31T04:09:48.175Z",
331 |     "createdAt": "2021-08-31T04:09:41.970Z",
332 |     "updatedAt": "2021-08-31T04:09:48.725Z",
333 |     "__v": 0,
334 |     "id": "612dab85fa2eca0016d18376",
335 |     "category": "Adidas",
336 |     "type": "Jacket and Hoodie",
337 |     "images": [
338 |       "https://i.ibb.co/XV1X0sn/adidas-originals-Navy-London-Half-zip-Overhead-Jacket.jpg",
339 |       "https://i.ibb.co/nfskcc8/adidas-originals-Navy-London-Half-zip-Overhead-Jacket-1.jpg"
340 |     ]
341 |   },
342 |   {
343 |     "_id": "612dabd6fa2eca0016d18377",
344 |     "name": "Nike Dri-FIT Classic Basketball Jersey",
345 |     "slug": "nike-dri-fit-classic-basketball-jersey",
346 |     "color": "Black/Red",
347 |     "price": "759000",
348 |     "published_at": "2021-08-31T04:12:25.385Z",
349 |     "createdAt": "2021-08-31T04:11:02.194Z",
350 |     "updatedAt": "2021-08-31T04:12:25.938Z",
351 |     "__v": 0,
352 |     "id": "612dabd6fa2eca0016d18377",
353 |     "category": "Nike product",
354 |     "type": "Jerseys and Kits",
355 |     "images": [
356 |       "https://i.ibb.co/0VnWhNb/dri-fit-classic-basketball-jersey-g-Z1-Bk0.jpg",
357 |       "https://i.ibb.co/ccbzTbg/nike-m-dry-classic-jersey.jpg"
358 |     ]
359 |   }
360 | ]


--------------------------------------------------------------------------------
/public/workbox-4a677df8.js:
--------------------------------------------------------------------------------
1 | define("./workbox-4a677df8.js",["exports"],(function(t){"use strict";try{self["workbox:core:6.2.4"]&&_()}catch(t){}const e=(t,...e)=>{let s=t;return e.length>0&&(s+=` :: ${JSON.stringify(e)}`),s};class s extends Error{constructor(t,s){super(e(t,s)),this.name=t,this.details=s}}try{self["workbox:routing:6.2.4"]&&_()}catch(t){}const n=t=>t&&"object"==typeof t?t:{handle:t};class r{constructor(t,e,s="GET"){this.handler=n(e),this.match=t,this.method=s}setCatchHandler(t){this.catchHandler=n(t)}}class i extends r{constructor(t,e,s){super((({url:e})=>{const s=t.exec(e.href);if(s&&(e.origin===location.origin||0===s.index))return s.slice(1)}),e,s)}}class a{constructor(){this.t=new Map,this.i=new Map}get routes(){return this.t}addFetchListener(){self.addEventListener("fetch",(t=>{const{request:e}=t,s=this.handleRequest({request:e,event:t});s&&t.respondWith(s)}))}addCacheListener(){self.addEventListener("message",(t=>{if(t.data&&"CACHE_URLS"===t.data.type){const{payload:e}=t.data,s=Promise.all(e.urlsToCache.map((e=>{"string"==typeof e&&(e=[e]);const s=new Request(...e);return this.handleRequest({request:s,event:t})})));t.waitUntil(s),t.ports&&t.ports[0]&&s.then((()=>t.ports[0].postMessage(!0)))}}))}handleRequest({request:t,event:e}){const s=new URL(t.url,location.href);if(!s.protocol.startsWith("http"))return;const n=s.origin===location.origin,{params:r,route:i}=this.findMatchingRoute({event:e,request:t,sameOrigin:n,url:s});let a=i&&i.handler;const o=t.method;if(!a&&this.i.has(o)&&(a=this.i.get(o)),!a)return;let c;try{c=a.handle({url:s,request:t,event:e,params:r})}catch(t){c=Promise.reject(t)}const h=i&&i.catchHandler;return c instanceof Promise&&(this.o||h)&&(c=c.catch((async n=>{if(h)try{return await h.handle({url:s,request:t,event:e,params:r})}catch(t){t instanceof Error&&(n=t)}if(this.o)return this.o.handle({url:s,request:t,event:e});throw n}))),c}findMatchingRoute({url:t,sameOrigin:e,request:s,event:n}){const r=this.t.get(s.method)||[];for(const i of r){let r;const a=i.match({url:t,sameOrigin:e,request:s,event:n});if(a)return r=a,(Array.isArray(r)&&0===r.length||a.constructor===Object&&0===Object.keys(a).length||"boolean"==typeof a)&&(r=void 0),{route:i,params:r}}return{}}setDefaultHandler(t,e="GET"){this.i.set(e,n(t))}setCatchHandler(t){this.o=n(t)}registerRoute(t){this.t.has(t.method)||this.t.set(t.method,[]),this.t.get(t.method).push(t)}unregisterRoute(t){if(!this.t.has(t.method))throw new s("unregister-route-but-not-found-with-method",{method:t.method});const e=this.t.get(t.method).indexOf(t);if(!(e>-1))throw new s("unregister-route-route-not-registered");this.t.get(t.method).splice(e,1)}}let o;const c=()=>(o||(o=new a,o.addFetchListener(),o.addCacheListener()),o);function h(t,e,n){let a;if("string"==typeof t){const s=new URL(t,location.href);a=new r((({url:t})=>t.href===s.href),e,n)}else if(t instanceof RegExp)a=new i(t,e,n);else if("function"==typeof t)a=new r(t,e,n);else{if(!(t instanceof r))throw new s("unsupported-route-type",{moduleName:"workbox-routing",funcName:"registerRoute",paramName:"capture"});a=t}return c().registerRoute(a),a}try{self["workbox:strategies:6.2.4"]&&_()}catch(t){}const u={cacheWillUpdate:async({response:t})=>200===t.status||0===t.status?t:null},l={googleAnalytics:"googleAnalytics",precache:"precache-v2",prefix:"workbox",runtime:"runtime",suffix:"undefined"!=typeof registration?registration.scope:""},f=t=>[l.prefix,t,l.suffix].filter((t=>t&&t.length>0)).join("-"),w=t=>t||f(l.precache),d=t=>t||f(l.runtime);function p(t,e){const s=new URL(t);for(const t of e)s.searchParams.delete(t);return s.href}class y{constructor(){this.promise=new Promise(((t,e)=>{this.resolve=t,this.reject=e}))}}const g=new Set;function m(t){return"string"==typeof t?new Request(t):t}class R{constructor(t,e){this.h={},Object.assign(this,e),this.event=e.event,this.u=t,this.l=new y,this.p=[],this.g=[...t.plugins],this.m=new Map;for(const t of this.g)this.m.set(t,{});this.event.waitUntil(this.l.promise)}async fetch(t){const{event:e}=this;let n=m(t);if("navigate"===n.mode&&e instanceof FetchEvent&&e.preloadResponse){const t=await e.preloadResponse;if(t)return t}const r=this.hasCallback("fetchDidFail")?n.clone():null;try{for(const t of this.iterateCallbacks("requestWillFetch"))n=await t({request:n.clone(),event:e})}catch(t){if(t instanceof Error)throw new s("plugin-error-request-will-fetch",{thrownErrorMessage:t.message})}const i=n.clone();try{let t;t=await fetch(n,"navigate"===n.mode?void 0:this.u.fetchOptions);for(const s of this.iterateCallbacks("fetchDidSucceed"))t=await s({event:e,request:i,response:t});return t}catch(t){throw r&&await this.runCallbacks("fetchDidFail",{error:t,event:e,originalRequest:r.clone(),request:i.clone()}),t}}async fetchAndCachePut(t){const e=await this.fetch(t),s=e.clone();return this.waitUntil(this.cachePut(t,s)),e}async cacheMatch(t){const e=m(t);let s;const{cacheName:n,matchOptions:r}=this.u,i=await this.getCacheKey(e,"read"),a=Object.assign(Object.assign({},r),{cacheName:n});s=await caches.match(i,a);for(const t of this.iterateCallbacks("cachedResponseWillBeUsed"))s=await t({cacheName:n,matchOptions:r,cachedResponse:s,request:i,event:this.event})||void 0;return s}async cachePut(t,e){const n=m(t);var r;await(r=0,new Promise((t=>setTimeout(t,r))));const i=await this.getCacheKey(n,"write");if(!e)throw new s("cache-put-with-no-response",{url:(a=i.url,new URL(String(a),location.href).href.replace(new RegExp(`^${location.origin}`),""))});var a;const o=await this.R(e);if(!o)return!1;const{cacheName:c,matchOptions:h}=this.u,u=await self.caches.open(c),l=this.hasCallback("cacheDidUpdate"),f=l?await async function(t,e,s,n){const r=p(e.url,s);if(e.url===r)return t.match(e,n);const i=Object.assign(Object.assign({},n),{ignoreSearch:!0}),a=await t.keys(e,i);for(const e of a)if(r===p(e.url,s))return t.match(e,n)}(u,i.clone(),["__WB_REVISION__"],h):null;try{await u.put(i,l?o.clone():o)}catch(t){if(t instanceof Error)throw"QuotaExceededError"===t.name&&await async function(){for(const t of g)await t()}(),t}for(const t of this.iterateCallbacks("cacheDidUpdate"))await t({cacheName:c,oldResponse:f,newResponse:o.clone(),request:i,event:this.event});return!0}async getCacheKey(t,e){if(!this.h[e]){let s=t;for(const t of this.iterateCallbacks("cacheKeyWillBeUsed"))s=m(await t({mode:e,request:s,event:this.event,params:this.params}));this.h[e]=s}return this.h[e]}hasCallback(t){for(const e of this.u.plugins)if(t in e)return!0;return!1}async runCallbacks(t,e){for(const s of this.iterateCallbacks(t))await s(e)}*iterateCallbacks(t){for(const e of this.u.plugins)if("function"==typeof e[t]){const s=this.m.get(e),n=n=>{const r=Object.assign(Object.assign({},n),{state:s});return e[t](r)};yield n}}waitUntil(t){return this.p.push(t),t}async doneWaiting(){let t;for(;t=this.p.shift();)await t}destroy(){this.l.resolve(null)}async R(t){let e=t,s=!1;for(const t of this.iterateCallbacks("cacheWillUpdate"))if(e=await t({request:this.request,response:e,event:this.event})||void 0,s=!0,!e)break;return s||e&&200!==e.status&&(e=void 0),e}}class v{constructor(t={}){this.cacheName=d(t.cacheName),this.plugins=t.plugins||[],this.fetchOptions=t.fetchOptions,this.matchOptions=t.matchOptions}handle(t){const[e]=this.handleAll(t);return e}handleAll(t){t instanceof FetchEvent&&(t={event:t,request:t.request});const e=t.event,s="string"==typeof t.request?new Request(t.request):t.request,n="params"in t?t.params:void 0,r=new R(this,{event:e,request:s,params:n}),i=this.v(r,s,e);return[i,this.q(i,r,s,e)]}async v(t,e,n){let r;await t.runCallbacks("handlerWillStart",{event:n,request:e});try{if(r=await this.D(e,t),!r||"error"===r.type)throw new s("no-response",{url:e.url})}catch(s){if(s instanceof Error)for(const i of t.iterateCallbacks("handlerDidError"))if(r=await i({error:s,event:n,request:e}),r)break;if(!r)throw s}for(const s of t.iterateCallbacks("handlerWillRespond"))r=await s({event:n,request:e,response:r});return r}async q(t,e,s,n){let r,i;try{r=await t}catch(i){}try{await e.runCallbacks("handlerDidRespond",{event:n,request:s,response:r}),await e.doneWaiting()}catch(t){t instanceof Error&&(i=t)}if(await e.runCallbacks("handlerDidComplete",{event:n,request:s,response:r,error:i}),e.destroy(),i)throw i}}function b(t){t.then((()=>{}))}function q(){return q=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var s=arguments[e];for(var n in s)Object.prototype.hasOwnProperty.call(s,n)&&(t[n]=s[n])}return t},q.apply(this,arguments)}let D,U;const x=new WeakMap,L=new WeakMap,I=new WeakMap,C=new WeakMap,E=new WeakMap;let N={get(t,e,s){if(t instanceof IDBTransaction){if("done"===e)return L.get(t);if("objectStoreNames"===e)return t.objectStoreNames||I.get(t);if("store"===e)return s.objectStoreNames[1]?void 0:s.objectStore(s.objectStoreNames[0])}return T(t[e])},set:(t,e,s)=>(t[e]=s,!0),has:(t,e)=>t instanceof IDBTransaction&&("done"===e||"store"===e)||e in t};function k(t){return t!==IDBDatabase.prototype.transaction||"objectStoreNames"in IDBTransaction.prototype?(U||(U=[IDBCursor.prototype.advance,IDBCursor.prototype.continue,IDBCursor.prototype.continuePrimaryKey])).includes(t)?function(...e){return t.apply(B(this),e),T(x.get(this))}:function(...e){return T(t.apply(B(this),e))}:function(e,...s){const n=t.call(B(this),e,...s);return I.set(n,e.sort?e.sort():[e]),T(n)}}function O(t){return"function"==typeof t?k(t):(t instanceof IDBTransaction&&function(t){if(L.has(t))return;const e=new Promise(((e,s)=>{const n=()=>{t.removeEventListener("complete",r),t.removeEventListener("error",i),t.removeEventListener("abort",i)},r=()=>{e(),n()},i=()=>{s(t.error||new DOMException("AbortError","AbortError")),n()};t.addEventListener("complete",r),t.addEventListener("error",i),t.addEventListener("abort",i)}));L.set(t,e)}(t),e=t,(D||(D=[IDBDatabase,IDBObjectStore,IDBIndex,IDBCursor,IDBTransaction])).some((t=>e instanceof t))?new Proxy(t,N):t);var e}function T(t){if(t instanceof IDBRequest)return function(t){const e=new Promise(((e,s)=>{const n=()=>{t.removeEventListener("success",r),t.removeEventListener("error",i)},r=()=>{e(T(t.result)),n()},i=()=>{s(t.error),n()};t.addEventListener("success",r),t.addEventListener("error",i)}));return e.then((e=>{e instanceof IDBCursor&&x.set(e,t)})).catch((()=>{})),E.set(e,t),e}(t);if(C.has(t))return C.get(t);const e=O(t);return e!==t&&(C.set(t,e),E.set(e,t)),e}const B=t=>E.get(t);const P=["get","getKey","getAll","getAllKeys","count"],M=["put","add","delete","clear"],W=new Map;function j(t,e){if(!(t instanceof IDBDatabase)||e in t||"string"!=typeof e)return;if(W.get(e))return W.get(e);const s=e.replace(/FromIndex$/,""),n=e!==s,r=M.includes(s);if(!(s in(n?IDBIndex:IDBObjectStore).prototype)||!r&&!P.includes(s))return;const i=async function(t,...e){const i=this.transaction(t,r?"readwrite":"readonly");let a=i.store;return n&&(a=a.index(e.shift())),(await Promise.all([a[s](...e),r&&i.done]))[0]};return W.set(e,i),i}N=(t=>q({},t,{get:(e,s,n)=>j(e,s)||t.get(e,s,n),has:(e,s)=>!!j(e,s)||t.has(e,s)}))(N);try{self["workbox:expiration:6.2.4"]&&_()}catch(t){}const S="cache-entries",K=t=>{const e=new URL(t,location.href);return e.hash="",e.href};class A{constructor(t){this.U=null,this._=t}L(t){const e=t.createObjectStore(S,{keyPath:"id"});e.createIndex("cacheName","cacheName",{unique:!1}),e.createIndex("timestamp","timestamp",{unique:!1})}I(t){this.L(t),this._&&function(t,{blocked:e}={}){const s=indexedDB.deleteDatabase(t);e&&s.addEventListener("blocked",(()=>e())),T(s).then((()=>{}))}(this._)}async setTimestamp(t,e){const s={url:t=K(t),timestamp:e,cacheName:this._,id:this.C(t)},n=(await this.getDb()).transaction(S,"readwrite",{durability:"relaxed"});await n.store.put(s),await n.done}async getTimestamp(t){const e=await this.getDb(),s=await e.get(S,this.C(t));return null==s?void 0:s.timestamp}async expireEntries(t,e){const s=await this.getDb();let n=await s.transaction(S).store.index("timestamp").openCursor(null,"prev");const r=[];let i=0;for(;n;){const s=n.value;s.cacheName===this._&&(t&&s.timestamp<t||e&&i>=e?r.push(n.value):i++),n=await n.continue()}const a=[];for(const t of r)await s.delete(S,t.id),a.push(t.url);return a}C(t){return this._+"|"+K(t)}async getDb(){return this.U||(this.U=await function(t,e,{blocked:s,upgrade:n,blocking:r,terminated:i}={}){const a=indexedDB.open(t,e),o=T(a);return n&&a.addEventListener("upgradeneeded",(t=>{n(T(a.result),t.oldVersion,t.newVersion,T(a.transaction))})),s&&a.addEventListener("blocked",(()=>s())),o.then((t=>{i&&t.addEventListener("close",(()=>i())),r&&t.addEventListener("versionchange",(()=>r()))})).catch((()=>{})),o}("workbox-expiration",1,{upgrade:this.I.bind(this)})),this.U}}class F{constructor(t,e={}){this.N=!1,this.k=!1,this.O=e.maxEntries,this.T=e.maxAgeSeconds,this.B=e.matchOptions,this._=t,this.P=new A(t)}async expireEntries(){if(this.N)return void(this.k=!0);this.N=!0;const t=this.T?Date.now()-1e3*this.T:0,e=await this.P.expireEntries(t,this.O),s=await self.caches.open(this._);for(const t of e)await s.delete(t,this.B);this.N=!1,this.k&&(this.k=!1,b(this.expireEntries()))}async updateTimestamp(t){await this.P.setTimestamp(t,Date.now())}async isURLExpired(t){if(this.T){const e=await this.P.getTimestamp(t),s=Date.now()-1e3*this.T;return void 0===e||e<s}return!1}async delete(){this.k=!1,await this.P.expireEntries(1/0)}}try{self["workbox:range-requests:6.2.4"]&&_()}catch(t){}async function H(t,e){try{if(206===e.status)return e;const n=t.headers.get("range");if(!n)throw new s("no-range-header");const r=function(t){const e=t.trim().toLowerCase();if(!e.startsWith("bytes="))throw new s("unit-must-be-bytes",{normalizedRangeHeader:e});if(e.includes(","))throw new s("single-range-only",{normalizedRangeHeader:e});const n=/(\d*)-(\d*)/.exec(e);if(!n||!n[1]&&!n[2])throw new s("invalid-range-values",{normalizedRangeHeader:e});return{start:""===n[1]?void 0:Number(n[1]),end:""===n[2]?void 0:Number(n[2])}}(n),i=await e.blob(),a=function(t,e,n){const r=t.size;if(n&&n>r||e&&e<0)throw new s("range-not-satisfiable",{size:r,end:n,start:e});let i,a;return void 0!==e&&void 0!==n?(i=e,a=n+1):void 0!==e&&void 0===n?(i=e,a=r):void 0!==n&&void 0===e&&(i=r-n,a=r),{start:i,end:a}}(i,r.start,r.end),o=i.slice(a.start,a.end),c=o.size,h=new Response(o,{status:206,statusText:"Partial Content",headers:e.headers});return h.headers.set("Content-Length",String(c)),h.headers.set("Content-Range",`bytes ${a.start}-${a.end-1}/${i.size}`),h}catch(t){return new Response("",{status:416,statusText:"Range Not Satisfiable"})}}function $(t,e){const s=e();return t.waitUntil(s),s}try{self["workbox:precaching:6.2.4"]&&_()}catch(t){}function z(t){if(!t)throw new s("add-to-cache-list-unexpected-type",{entry:t});if("string"==typeof t){const e=new URL(t,location.href);return{cacheKey:e.href,url:e.href}}const{revision:e,url:n}=t;if(!n)throw new s("add-to-cache-list-unexpected-type",{entry:t});if(!e){const t=new URL(n,location.href);return{cacheKey:t.href,url:t.href}}const r=new URL(n,location.href),i=new URL(n,location.href);return r.searchParams.set("__WB_REVISION__",e),{cacheKey:r.href,url:i.href}}class G{constructor(){this.updatedURLs=[],this.notUpdatedURLs=[],this.handlerWillStart=async({request:t,state:e})=>{e&&(e.originalRequest=t)},this.cachedResponseWillBeUsed=async({event:t,state:e,cachedResponse:s})=>{if("install"===t.type&&e&&e.originalRequest&&e.originalRequest instanceof Request){const t=e.originalRequest.url;s?this.notUpdatedURLs.push(t):this.updatedURLs.push(t)}return s}}}class V{constructor({precacheController:t}){this.cacheKeyWillBeUsed=async({request:t,params:e})=>{const s=(null==e?void 0:e.cacheKey)||this.M.getCacheKeyForURL(t.url);return s?new Request(s,{headers:t.headers}):t},this.M=t}}let J,Q;async function X(t,e){let n=null;if(t.url){n=new URL(t.url).origin}if(n!==self.location.origin)throw new s("cross-origin-copy-response",{origin:n});const r=t.clone(),i={headers:new Headers(r.headers),status:r.status,statusText:r.statusText},a=e?e(i):i,o=function(){if(void 0===J){const t=new Response("");if("body"in t)try{new Response(t.body),J=!0}catch(t){J=!1}J=!1}return J}()?r.body:await r.blob();return new Response(o,a)}class Y extends v{constructor(t={}){t.cacheName=w(t.cacheName),super(t),this.W=!1!==t.fallbackToNetwork,this.plugins.push(Y.copyRedirectedCacheableResponsesPlugin)}async D(t,e){const s=await e.cacheMatch(t);return s||(e.event&&"install"===e.event.type?await this.j(t,e):await this.S(t,e))}async S(t,e){let n;const r=e.params||{};if(!this.W)throw new s("missing-precache-entry",{cacheName:this.cacheName,url:t.url});{const s=r.integrity,i=t.integrity,a=!i||i===s;n=await e.fetch(new Request(t,{integrity:i||s})),s&&a&&(this.K(),await e.cachePut(t,n.clone()))}return n}async j(t,e){this.K();const n=await e.fetch(t);if(!await e.cachePut(t,n.clone()))throw new s("bad-precaching-response",{url:t.url,status:n.status});return n}K(){let t=null,e=0;for(const[s,n]of this.plugins.entries())n!==Y.copyRedirectedCacheableResponsesPlugin&&(n===Y.defaultPrecacheCacheabilityPlugin&&(t=s),n.cacheWillUpdate&&e++);0===e?this.plugins.push(Y.defaultPrecacheCacheabilityPlugin):e>1&&null!==t&&this.plugins.splice(t,1)}}Y.defaultPrecacheCacheabilityPlugin={cacheWillUpdate:async({response:t})=>!t||t.status>=400?null:t},Y.copyRedirectedCacheableResponsesPlugin={cacheWillUpdate:async({response:t})=>t.redirected?await X(t):t};class Z{constructor({cacheName:t,plugins:e=[],fallbackToNetwork:s=!0}={}){this.A=new Map,this.F=new Map,this.H=new Map,this.u=new Y({cacheName:w(t),plugins:[...e,new V({precacheController:this})],fallbackToNetwork:s}),this.install=this.install.bind(this),this.activate=this.activate.bind(this)}get strategy(){return this.u}precache(t){this.addToCacheList(t),this.$||(self.addEventListener("install",this.install),self.addEventListener("activate",this.activate),this.$=!0)}addToCacheList(t){const e=[];for(const n of t){"string"==typeof n?e.push(n):n&&void 0===n.revision&&e.push(n.url);const{cacheKey:t,url:r}=z(n),i="string"!=typeof n&&n.revision?"reload":"default";if(this.A.has(r)&&this.A.get(r)!==t)throw new s("add-to-cache-list-conflicting-entries",{firstEntry:this.A.get(r),secondEntry:t});if("string"!=typeof n&&n.integrity){if(this.H.has(t)&&this.H.get(t)!==n.integrity)throw new s("add-to-cache-list-conflicting-integrities",{url:r});this.H.set(t,n.integrity)}if(this.A.set(r,t),this.F.set(r,i),e.length>0){const t=`Workbox is precaching URLs without revision info: ${e.join(", ")}\nThis is generally NOT safe. Learn more at https://bit.ly/wb-precache`;console.warn(t)}}}install(t){return $(t,(async()=>{const e=new G;this.strategy.plugins.push(e);for(const[e,s]of this.A){const n=this.H.get(s),r=this.F.get(e),i=new Request(e,{integrity:n,cache:r,credentials:"same-origin"});await Promise.all(this.strategy.handleAll({params:{cacheKey:s},request:i,event:t}))}const{updatedURLs:s,notUpdatedURLs:n}=e;return{updatedURLs:s,notUpdatedURLs:n}}))}activate(t){return $(t,(async()=>{const t=await self.caches.open(this.strategy.cacheName),e=await t.keys(),s=new Set(this.A.values()),n=[];for(const r of e)s.has(r.url)||(await t.delete(r),n.push(r.url));return{deletedURLs:n}}))}getURLsToCacheKeys(){return this.A}getCachedURLs(){return[...this.A.keys()]}getCacheKeyForURL(t){const e=new URL(t,location.href);return this.A.get(e.href)}getIntegrityForCacheKey(t){return this.H.get(t)}async matchPrecache(t){const e=t instanceof Request?t.url:t,s=this.getCacheKeyForURL(e);if(s){return(await self.caches.open(this.strategy.cacheName)).match(s)}}createHandlerBoundToURL(t){const e=this.getCacheKeyForURL(t);if(!e)throw new s("non-precached-url",{url:t});return s=>(s.request=new Request(t),s.params=Object.assign({cacheKey:e},s.params),this.strategy.handle(s))}}const tt=()=>(Q||(Q=new Z),Q);class et extends r{constructor(t,e){super((({request:s})=>{const n=t.getURLsToCacheKeys();for(const r of function*(t,{ignoreURLParametersMatching:e=[/^utm_/,/^fbclid$/],directoryIndex:s="index.html",cleanURLs:n=!0,urlManipulation:r}={}){const i=new URL(t,location.href);i.hash="",yield i.href;const a=function(t,e=[]){for(const s of[...t.searchParams.keys()])e.some((t=>t.test(s)))&&t.searchParams.delete(s);return t}(i,e);if(yield a.href,s&&a.pathname.endsWith("/")){const t=new URL(a.href);t.pathname+=s,yield t.href}if(n){const t=new URL(a.href);t.pathname+=".html",yield t.href}if(r){const t=r({url:i});for(const e of t)yield e.href}}(s.url,e)){const e=n.get(r);if(e){return{cacheKey:e,integrity:t.getIntegrityForCacheKey(e)}}}}),t.strategy)}}t.CacheFirst=class extends v{async D(t,e){let n,r=await e.cacheMatch(t);if(!r)try{r=await e.fetchAndCachePut(t)}catch(t){t instanceof Error&&(n=t)}if(!r)throw new s("no-response",{url:t.url,error:n});return r}},t.ExpirationPlugin=class{constructor(t={}){this.cachedResponseWillBeUsed=async({event:t,request:e,cacheName:s,cachedResponse:n})=>{if(!n)return null;const r=this.G(n),i=this.V(s);b(i.expireEntries());const a=i.updateTimestamp(e.url);if(t)try{t.waitUntil(a)}catch(t){}return r?n:null},this.cacheDidUpdate=async({cacheName:t,request:e})=>{const s=this.V(t);await s.updateTimestamp(e.url),await s.expireEntries()},this.J=t,this.T=t.maxAgeSeconds,this.X=new Map,t.purgeOnQuotaError&&function(t){g.add(t)}((()=>this.deleteCacheAndMetadata()))}V(t){if(t===d())throw new s("expire-custom-caches-only");let e=this.X.get(t);return e||(e=new F(t,this.J),this.X.set(t,e)),e}G(t){if(!this.T)return!0;const e=this.Y(t);if(null===e)return!0;return e>=Date.now()-1e3*this.T}Y(t){if(!t.headers.has("date"))return null;const e=t.headers.get("date"),s=new Date(e).getTime();return isNaN(s)?null:s}async deleteCacheAndMetadata(){for(const[t,e]of this.X)await self.caches.delete(t),await e.delete();this.X=new Map}},t.NetworkFirst=class extends v{constructor(t={}){super(t),this.plugins.some((t=>"cacheWillUpdate"in t))||this.plugins.unshift(u),this.Z=t.networkTimeoutSeconds||0}async D(t,e){const n=[],r=[];let i;if(this.Z){const{id:s,promise:a}=this.tt({request:t,logs:n,handler:e});i=s,r.push(a)}const a=this.et({timeoutId:i,request:t,logs:n,handler:e});r.push(a);const o=await e.waitUntil((async()=>await e.waitUntil(Promise.race(r))||await a)());if(!o)throw new s("no-response",{url:t.url});return o}tt({request:t,logs:e,handler:s}){let n;return{promise:new Promise((e=>{n=setTimeout((async()=>{e(await s.cacheMatch(t))}),1e3*this.Z)})),id:n}}async et({timeoutId:t,request:e,logs:s,handler:n}){let r,i;try{i=await n.fetchAndCachePut(e)}catch(t){t instanceof Error&&(r=t)}return t&&clearTimeout(t),!r&&i||(i=await n.cacheMatch(e)),i}},t.RangeRequestsPlugin=class{constructor(){this.cachedResponseWillBeUsed=async({request:t,cachedResponse:e})=>e&&t.headers.has("range")?await H(t,e):e}},t.StaleWhileRevalidate=class extends v{constructor(t={}){super(t),this.plugins.some((t=>"cacheWillUpdate"in t))||this.plugins.unshift(u)}async D(t,e){const n=e.fetchAndCachePut(t).catch((()=>{}));let r,i=await e.cacheMatch(t);if(i);else try{i=await n}catch(t){t instanceof Error&&(r=t)}if(!i)throw new s("no-response",{url:t.url,error:r});return i}},t.cleanupOutdatedCaches=function(){self.addEventListener("activate",(t=>{const e=w();t.waitUntil((async(t,e="-precache-")=>{const s=(await self.caches.keys()).filter((s=>s.includes(e)&&s.includes(self.registration.scope)&&s!==t));return await Promise.all(s.map((t=>self.caches.delete(t)))),s})(e).then((t=>{})))}))},t.clientsClaim=function(){self.addEventListener("activate",(()=>self.clients.claim()))},t.precacheAndRoute=function(t,e){!function(t){tt().precache(t)}(t),function(t){const e=tt();h(new et(e,t))}(e)},t.registerRoute=h}));
2 | 


--------------------------------------------------------------------------------