diff options
| author | Rafi Zadanly <zadanlyr@gmail.com> | 2023-02-22 11:03:34 +0700 |
|---|---|---|
| committer | Rafi Zadanly <zadanlyr@gmail.com> | 2023-02-22 11:03:34 +0700 |
| commit | f66b12fd1d0b83af0d7230d7b1565fbe00afbe3c (patch) | |
| tree | 253dcf854a3c92e09ca846e86a09e5b4c5d16be1 /src/lib/home/components | |
| parent | 3c559031623649a67825ff47f34512f0eb946861 (diff) | |
prettier
Diffstat (limited to 'src/lib/home/components')
| -rw-r--r-- | src/lib/home/components/CategoryHome.jsx | 22 | ||||
| -rw-r--r-- | src/lib/home/components/CategoryHomeId.jsx | 14 | ||||
| -rw-r--r-- | src/lib/home/components/HeroBanner.jsx | 42 | ||||
| -rw-r--r-- | src/lib/home/components/PopularProduct.jsx | 27 | ||||
| -rw-r--r-- | src/lib/home/components/PreferredBrand.jsx | 32 | ||||
| -rw-r--r-- | src/lib/home/components/Skeleton/PopularProductSkeleton.jsx | 6 | ||||
| -rw-r--r-- | src/lib/home/components/Skeleton/PreferredBrandSkeleton.jsx | 6 |
7 files changed, 69 insertions, 80 deletions
diff --git a/src/lib/home/components/CategoryHome.jsx b/src/lib/home/components/CategoryHome.jsx index 0bca9846..ac43e2bc 100644 --- a/src/lib/home/components/CategoryHome.jsx +++ b/src/lib/home/components/CategoryHome.jsx @@ -1,14 +1,14 @@ -import ProductSlider from "@/lib/product/components/ProductSlider" -import useCategoryHome from "../hooks/useCategoryHome" -import PopularProductSkeleton from "./Skeleton/PopularProductSkeleton" +import ProductSlider from '@/lib/product/components/ProductSlider' +import useCategoryHome from '../hooks/useCategoryHome' +import PopularProductSkeleton from './Skeleton/PopularProductSkeleton' const CategoryHome = ({ id }) => { const { categoryHome } = useCategoryHome({ id }) - + return ( - <div className="p-4 relative bg-yellow_r-2"> - { categoryHome.data ? ( - <ProductSlider + <div className='p-4 relative bg-yellow_r-2'> + {categoryHome.data ? ( + <ProductSlider products={{ products: categoryHome.data?.[0].products, banner: { @@ -16,13 +16,15 @@ const CategoryHome = ({ id }) => { name: categoryHome.data?.[0].name, url: `/shop/search?category=${categoryHome.data?.[0].name}` } - }} + }} simpleTitle bannerMode /> - ) : <PopularProductSkeleton /> } + ) : ( + <PopularProductSkeleton /> + )} </div> ) } -export default CategoryHome
\ No newline at end of file +export default CategoryHome diff --git a/src/lib/home/components/CategoryHomeId.jsx b/src/lib/home/components/CategoryHomeId.jsx index 4cbbd1fc..c37a6af7 100644 --- a/src/lib/home/components/CategoryHomeId.jsx +++ b/src/lib/home/components/CategoryHomeId.jsx @@ -1,19 +1,19 @@ -import { LazyLoadComponent } from "react-lazy-load-image-component" -import useCategoryHomeId from "../hooks/useCategoryHomeId" -import CategoryHome from "./CategoryHome" +import { LazyLoadComponent } from 'react-lazy-load-image-component' +import useCategoryHomeId from '../hooks/useCategoryHomeId' +import CategoryHome from './CategoryHome' const CategoryHomeId = () => { const { categoryHomeIds } = useCategoryHomeId() return ( - <div className="flex flex-col gap-y-6"> - { categoryHomeIds.data?.map((id) => ( + <div className='flex flex-col gap-y-6'> + {categoryHomeIds.data?.map((id) => ( <LazyLoadComponent key={id}> <CategoryHome id={id} /> </LazyLoadComponent> - )) } + ))} </div> ) } -export default CategoryHomeId
\ No newline at end of file +export default CategoryHomeId diff --git a/src/lib/home/components/HeroBanner.jsx b/src/lib/home/components/HeroBanner.jsx index 604ca8ac..6f39ac50 100644 --- a/src/lib/home/components/HeroBanner.jsx +++ b/src/lib/home/components/HeroBanner.jsx @@ -1,13 +1,13 @@ -import ImageSkeleton from "@/core/components/elements/Skeleton/ImageSkeleton" -import useHeroBanner from "../hooks/useHeroBanner" -import Image from "@/core/components/elements/Image/Image" +import ImageSkeleton from '@/core/components/elements/Skeleton/ImageSkeleton' +import useHeroBanner from '../hooks/useHeroBanner' +import Image from '@/core/components/elements/Image/Image' // Swiper -import { Swiper, SwiperSlide } from "swiper/react" -import { Pagination, Autoplay } from "swiper" -import "swiper/css" -import "swiper/css/pagination" -import "swiper/css/autoplay" +import { Swiper, SwiperSlide } from 'swiper/react' +import { Pagination, Autoplay } from 'swiper' +import 'swiper/css' +import 'swiper/css/pagination' +import 'swiper/css/autoplay' const swiperBanner = { pagination: { dynamicBullets: true }, @@ -20,31 +20,27 @@ const swiperBanner = { const HeroBanner = () => { const { heroBanners } = useHeroBanner() - + return ( - <div className="min-h-[200px]"> - { heroBanners.isLoading && <ImageSkeleton /> } - { !heroBanners.isLoading && ( + <div className='min-h-[200px]'> + {heroBanners.isLoading && <ImageSkeleton />} + {!heroBanners.isLoading && ( <Swiper slidesPerView={1} - pagination={swiperBanner.pagination} + pagination={swiperBanner.pagination} modules={swiperBanner.modules} autoplay={swiperBanner.autoplay} - className="border-b border-gray_r-6" + className='border-b border-gray_r-6' > - { heroBanners.data?.map((banner, index) => ( + {heroBanners.data?.map((banner, index) => ( <SwiperSlide key={index}> - <Image - src={banner.image} - alt={banner.name} - className="w-full h-auto" - /> + <Image src={banner.image} alt={banner.name} className='w-full h-auto' /> </SwiperSlide> - )) } + ))} </Swiper> - ) } + )} </div> ) } -export default HeroBanner
\ No newline at end of file +export default HeroBanner diff --git a/src/lib/home/components/PopularProduct.jsx b/src/lib/home/components/PopularProduct.jsx index 87e47218..7e222b0a 100644 --- a/src/lib/home/components/PopularProduct.jsx +++ b/src/lib/home/components/PopularProduct.jsx @@ -1,24 +1,19 @@ -import { Swiper, SwiperSlide } from "swiper/react" -import usePopularProduct from "../hooks/usePopularProduct" -import ProductCard from "@/lib/product/components/ProductCard" -import PopularProductSkeleton from "./Skeleton/PopularProductSkeleton" -import ProductSlider from "@/lib/product/components/ProductSlider" +import { Swiper, SwiperSlide } from 'swiper/react' +import usePopularProduct from '../hooks/usePopularProduct' +import ProductCard from '@/lib/product/components/ProductCard' +import PopularProductSkeleton from './Skeleton/PopularProductSkeleton' +import ProductSlider from '@/lib/product/components/ProductSlider' const PopularProduct = () => { const { popularProducts } = usePopularProduct() - + return ( - <div className="px-4"> - <div className="font-medium mb-4">Produk Populer</div> - { popularProducts.isLoading && <PopularProductSkeleton /> } - { !popularProducts.isLoading && ( - <ProductSlider - products={popularProducts.data} - simpleTitle - /> - ) } + <div className='px-4'> + <div className='font-medium mb-4'>Produk Populer</div> + {popularProducts.isLoading && <PopularProductSkeleton />} + {!popularProducts.isLoading && <ProductSlider products={popularProducts.data} simpleTitle />} </div> ) } -export default PopularProduct
\ No newline at end of file +export default PopularProduct diff --git a/src/lib/home/components/PreferredBrand.jsx b/src/lib/home/components/PreferredBrand.jsx index 3d3b1b69..de377031 100644 --- a/src/lib/home/components/PreferredBrand.jsx +++ b/src/lib/home/components/PreferredBrand.jsx @@ -1,30 +1,26 @@ -import { Swiper, SwiperSlide } from "swiper/react" -import usePreferredBrand from "../hooks/usePreferredBrand" -import PreferredBrandSkeleton from "./Skeleton/PreferredBrandSkeleton" -import BrandCard from "@/lib/brand/components/BrandCard" +import { Swiper, SwiperSlide } from 'swiper/react' +import usePreferredBrand from '../hooks/usePreferredBrand' +import PreferredBrandSkeleton from './Skeleton/PreferredBrandSkeleton' +import BrandCard from '@/lib/brand/components/BrandCard' const PreferredBrand = () => { const { preferredBrands } = usePreferredBrand() - + return ( - <div className="px-4"> - <div className="font-medium mb-4">Brand Pilihan</div> - { preferredBrands.isLoading && <PreferredBrandSkeleton /> } - { !preferredBrands.isLoading && ( - <Swiper - slidesPerView={3.5} - spaceBetween={8} - freeMode - > - { preferredBrands.data?.manufactures.map((brand) => ( + <div className='px-4'> + <div className='font-medium mb-4'>Brand Pilihan</div> + {preferredBrands.isLoading && <PreferredBrandSkeleton />} + {!preferredBrands.isLoading && ( + <Swiper slidesPerView={3.5} spaceBetween={8} freeMode> + {preferredBrands.data?.manufactures.map((brand) => ( <SwiperSlide key={brand.id}> <BrandCard brand={brand} /> </SwiperSlide> - )) } + ))} </Swiper> - ) } + )} </div> ) } -export default PreferredBrand
\ No newline at end of file +export default PreferredBrand diff --git a/src/lib/home/components/Skeleton/PopularProductSkeleton.jsx b/src/lib/home/components/Skeleton/PopularProductSkeleton.jsx index c5b0fcaa..18a1b3d3 100644 --- a/src/lib/home/components/Skeleton/PopularProductSkeleton.jsx +++ b/src/lib/home/components/Skeleton/PopularProductSkeleton.jsx @@ -1,10 +1,10 @@ -import ProductCardSkeleton from "@/core/components/elements/Skeleton/ProductCardSkeleton" +import ProductCardSkeleton from '@/core/components/elements/Skeleton/ProductCardSkeleton' const PopularProductSkeleton = () => ( - <div className="grid grid-cols-2 gap-x-3"> + <div className='grid grid-cols-2 gap-x-3'> <ProductCardSkeleton /> <ProductCardSkeleton /> </div> ) -export default PopularProductSkeleton
\ No newline at end of file +export default PopularProductSkeleton diff --git a/src/lib/home/components/Skeleton/PreferredBrandSkeleton.jsx b/src/lib/home/components/Skeleton/PreferredBrandSkeleton.jsx index 6bdd3c82..00589342 100644 --- a/src/lib/home/components/Skeleton/PreferredBrandSkeleton.jsx +++ b/src/lib/home/components/Skeleton/PreferredBrandSkeleton.jsx @@ -1,7 +1,7 @@ -import BrandSkeleton from "@/core/components/elements/Skeleton/BrandSkeleton" +import BrandSkeleton from '@/core/components/elements/Skeleton/BrandSkeleton' const PreferredBrandSkeleton = () => ( - <div className="grid grid-cols-4 gap-x-3"> + <div className='grid grid-cols-4 gap-x-3'> <BrandSkeleton /> <BrandSkeleton /> <BrandSkeleton /> @@ -9,4 +9,4 @@ const PreferredBrandSkeleton = () => ( </div> ) -export default PreferredBrandSkeleton
\ No newline at end of file +export default PreferredBrandSkeleton |
