From 6109c9b0bedbfd9b9be787987050102b2d6cba03 Mon Sep 17 00:00:00 2001 From: Rafi Zadanly Date: Sat, 17 Dec 2022 11:03:17 +0700 Subject: Create image component --- src/components/Image.js | 13 +++++++++++++ src/components/ManufactureCard.js | 9 ++++++--- src/components/ProductCard.js | 10 ++++++---- src/pages/index.js | 21 ++++++++++++++------- src/pages/shop/cart.js | 10 ++++++---- src/pages/shop/product/[slug].js | 9 ++++++--- 6 files changed, 51 insertions(+), 21 deletions(-) create mode 100644 src/components/Image.js (limited to 'src') diff --git a/src/components/Image.js b/src/components/Image.js new file mode 100644 index 00000000..f06272b0 --- /dev/null +++ b/src/components/Image.js @@ -0,0 +1,13 @@ +import { LazyLoadImage } from "react-lazy-load-image-component"; +import 'react-lazy-load-image-component/src/effects/blur.css'; + +export default function Image({ src, alt, className = "" }) { + return ( + + ); +} \ No newline at end of file diff --git a/src/components/ManufactureCard.js b/src/components/ManufactureCard.js index 6b96a852..52a964d5 100644 --- a/src/components/ManufactureCard.js +++ b/src/components/ManufactureCard.js @@ -1,6 +1,5 @@ -import { LazyLoadImage } from "react-lazy-load-image-component"; -import "react-lazy-load-image-component/src/effects/blur.css"; import { createSlug } from "../helpers/slug"; +import Image from "./Image"; import Link from "./Link"; export default function ManufactureCard({ data }) { @@ -8,7 +7,11 @@ export default function ManufactureCard({ data }) { return ( {manufacture.logo ? ( - + {manufacture.name} ) : manufacture.name} ); diff --git a/src/components/ProductCard.js b/src/components/ProductCard.js index b8967cc8..2cb0d99b 100644 --- a/src/components/ProductCard.js +++ b/src/components/ProductCard.js @@ -1,10 +1,8 @@ import Link from "./Link"; import currencyFormat from "../helpers/currencyFormat"; import { createSlug } from "../helpers/slug"; -import { LazyLoadImage } from "react-lazy-load-image-component"; import { ChevronRightIcon } from "@heroicons/react/20/solid"; - -import 'react-lazy-load-image-component/src/effects/blur.css'; +import Image from "./Image"; export default function ProductCard({ data }) { @@ -12,7 +10,11 @@ export default function ProductCard({ data }) { return (
- + {product.name} {product.variant_total > 1 ? (
{product.variant_total} Varian
) : ''} diff --git a/src/pages/index.js b/src/pages/index.js index f064d6ef..511f2ecd 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -1,18 +1,21 @@ import { useEffect, useState } from "react"; -import { LazyLoadImage } from "react-lazy-load-image-component"; -import { Swiper, SwiperSlide } from "swiper/react"; import { Pagination, Autoplay } from "swiper"; -import Header from "../components/Header"; -import apiOdoo from "../helpers/apiOdoo"; -import "react-lazy-load-image-component/src/effects/blur.css"; +import axios from "axios"; +import { Swiper, SwiperSlide } from "swiper/react"; import "swiper/css"; import "swiper/css/pagination"; import "swiper/css/autoplay"; + +// Helpers +import apiOdoo from "../helpers/apiOdoo"; + +// Components +import Header from "../components/Header"; import ProductSlider from "../components/product/ProductSlider"; import Layout from "../components/Layout"; -import axios from "axios"; import ManufactureCard from "../components/ManufactureCard"; import Footer from "../components/Footer"; +import Image from "../components/Image"; export async function getServerSideProps() { const heroBanners = await apiOdoo('GET', `/api/v1/banner?type=index-a-1`); @@ -53,7 +56,11 @@ export default function Home({ heroBanners }) { { heroBanners?.map((banner, index) => ( - + {banner.name} )) } diff --git a/src/pages/shop/cart.js b/src/pages/shop/cart.js index 64847de9..9958a7bb 100644 --- a/src/pages/shop/cart.js +++ b/src/pages/shop/cart.js @@ -7,14 +7,12 @@ import ChevronLeftIcon from "../../icons/chevron-left.svg"; import MinusIcon from "../../icons/minus.svg"; import PlusIcon from "../../icons/plus.svg"; import TrashIcon from "../../icons/trash.svg"; -import { LazyLoadImage } from "react-lazy-load-image-component"; import apiOdoo from "../../helpers/apiOdoo"; import currencyFormat from "../../helpers/currencyFormat"; import { createSlug } from "../../helpers/slug"; import ConfirmAlert from "../../components/ConfirmAlert"; import { toast } from "react-hot-toast"; - -import 'react-lazy-load-image-component/src/effects/blur.css'; +import Image from "../../components/Image"; export default function Cart() { const [products, setProducts] = useState([]); @@ -179,7 +177,11 @@ export default function Cart() { className={'p-2 rounded border-2 ' + (product.to_process ? 'border-yellow_r-9 bg-yellow_r-9' : 'border-gray_r-12')} onClick={() => toggleProductToProcess(product.id)} > - + {product.parent.name}
diff --git a/src/pages/shop/product/[slug].js b/src/pages/shop/product/[slug].js index 5e0c8853..b8d29d02 100644 --- a/src/pages/shop/product/[slug].js +++ b/src/pages/shop/product/[slug].js @@ -5,13 +5,12 @@ import Header from "../../../components/Header"; import apiOdoo from "../../../helpers/apiOdoo"; import { createSlug, getIdFromSlug } from "../../../helpers/slug"; import currencyFormat from "../../../helpers/currencyFormat"; -import { LazyLoadImage } from "react-lazy-load-image-component"; -import "react-lazy-load-image-component/src/effects/blur.css"; import ProductSlider from "../../../components/product/ProductSlider"; import Layout from "../../../components/Layout"; import { createOrUpdateItemCart } from "../../../helpers/cart"; import toast from "react-hot-toast"; import Footer from "../../../components/Footer"; +import Image from "../../../components/Image"; export async function getServerSideProps( context ) { const { slug } = context.query; @@ -103,7 +102,11 @@ export default function ProductDetail({ product }) { <>
- + {product.name}
{product.manufacture.name ?? '-'} -- cgit v1.2.3