diff options
Diffstat (limited to 'src/lib/brand')
| -rw-r--r-- | src/lib/brand/components/Brand.jsx | 125 | ||||
| -rw-r--r-- | src/lib/brand/components/Breadcrumb.jsx | 40 |
2 files changed, 109 insertions, 56 deletions
diff --git a/src/lib/brand/components/Brand.jsx b/src/lib/brand/components/Brand.jsx index 3c411969..4afbcb3e 100644 --- a/src/lib/brand/components/Brand.jsx +++ b/src/lib/brand/components/Brand.jsx @@ -6,10 +6,10 @@ import { Pagination, Autoplay } from 'swiper' import 'swiper/css' import 'swiper/css/pagination' import 'swiper/css/autoplay' -import Divider from '@/core/components/elements/Divider/Divider' -import ImageSkeleton from '@/core/components/elements/Skeleton/ImageSkeleton' import MobileView from '@/core/components/views/MobileView' import DesktopView from '@/core/components/views/DesktopView' +import { Skeleton } from '@chakra-ui/react' +import classNames from 'classnames' const swiperBanner = { pagination: { dynamicBullets: true }, @@ -28,65 +28,77 @@ const Brand = ({ id }) => { <MobileView> <> <div> - {brand.isLoading && <ImageSkeleton />} - {brand.data?.banners?.length == 0 && ( - <Image - src='/images/default-banner-brand.jpg' - alt='Brand - Indoteknik' - width={1024} - height={512} - className='w-full h-auto' - /> - )} - {brand.data && ( - <> - <Swiper - slidesPerView={1} - pagination={swiperBanner.pagination} - modules={swiperBanner.modules} - autoplay={swiperBanner.autoplay} - className='border-b border-gray_r-6' - > - {brand.data?.banners?.map((banner, index) => ( - <SwiperSlide key={index}> + <Skeleton + isLoaded={!brand.isLoading} + aspectRatio='4/2' + className={classNames({ + 'mb-6': brand.isLoading + })} + > + {brand.data?.banners?.length == 0 && ( + <Image + src='/images/default-banner-brand.jpg' + alt='Brand - Indoteknik' + width={1024} + height={512} + className='w-full h-auto' + /> + )} + + {brand.data && ( + <> + <Swiper + slidesPerView={1} + pagination={swiperBanner.pagination} + modules={swiperBanner.modules} + autoplay={swiperBanner.autoplay} + className='border-b border-gray_r-6' + > + {brand.data?.banners?.map((banner, index) => ( + <SwiperSlide key={index}> + <Image + src={banner} + alt={`Brand ${brand.data?.name} - Indoteknik`} + width={1024} + height={512} + className='w-full h-auto' + /> + </SwiperSlide> + ))} + </Swiper> + <div className='p-4'> + <div className='text-caption-1 text-gray_r-11 mb-2'>Produk dari brand:</div> + {brand?.data?.logo && ( <Image - src={banner} - alt={`Brand ${brand.data?.name} - Indoteknik`} - width={1024} - height={512} - className='w-full h-auto' + src={brand?.data?.logo} + alt={brand?.data?.name} + className='w-32 p-2 border borde-gray_r-6 rounded' + width={256} + height={128} /> - </SwiperSlide> - ))} - </Swiper> - <div className='p-4'> - <div className='text-caption-1 text-gray_r-11 mb-2'>Produk dari brand:</div> - {brand?.data?.logo && ( - <Image - src={brand?.data?.logo} - alt={brand?.data?.name} - className='w-32 p-2 border borde-gray_r-6 rounded' - width={256} - height={128} - /> - )} - {!brand?.data?.logo && ( - <div className='bg-danger-500 text-white text-center text-caption-1 py-2 px-4 rounded w-fit'> - {brand?.data?.name} - </div> - )} - </div> - </> - )} + )} + {!brand?.data?.logo && ( + <div className='bg-danger-500 text-white text-center text-caption-1 py-2 px-4 rounded w-fit'> + {brand?.data?.name} + </div> + )} + </div> + </> + )} + </Skeleton> </div> - <Divider /> </> </MobileView> <DesktopView> - <div className='container mx-auto mt-10 mb-3'> - <div className='min-h-[150px]'> - {brand.isLoading && <ImageSkeleton />} + <div className='container mx-auto'> + <Skeleton + isLoaded={!brand.isLoading} + aspectRatio='4/1' + className={classNames({ + 'mb-6': brand.isLoading + })} + > {brand.data?.banners?.length == 0 && ( <Image src='/images/default-banner-brand.jpg' @@ -96,6 +108,7 @@ const Brand = ({ id }) => { className='w-full h-auto' /> )} + {brand.data && ( <> <Swiper @@ -117,6 +130,7 @@ const Brand = ({ id }) => { </SwiperSlide> ))} </Swiper> + <div className='p-4'> <div className='text-caption-1 text-gray_r-11 mb-2'>Produk dari brand:</div> {brand?.data?.logo && ( @@ -136,8 +150,7 @@ const Brand = ({ id }) => { </div> </> )} - </div> - <Divider /> + </Skeleton> </div> </DesktopView> </> diff --git a/src/lib/brand/components/Breadcrumb.jsx b/src/lib/brand/components/Breadcrumb.jsx new file mode 100644 index 00000000..0fec2dad --- /dev/null +++ b/src/lib/brand/components/Breadcrumb.jsx @@ -0,0 +1,40 @@ +import { Breadcrumb as ChakraBreadcrumb, BreadcrumbItem, BreadcrumbLink } from '@chakra-ui/react' +import Link from 'next/link' +import React from 'react' + +/** + * Renders a breadcrumb component with links to navigate through different pages. + * + * @param {Object} props - The props object containing the brand name. + * @param {string} props.brandName - The name of the brand to display in the breadcrumb. + * @return {JSX.Element} The rendered breadcrumb component. + */ +const Breadcrumb = ({ brandName }) => { + return ( + <div className='container mx-auto py-4 md:py-6'> + <ChakraBreadcrumb> + <BreadcrumbItem> + <BreadcrumbLink as={Link} href='/' className='!text-danger-500 whitespace-nowrap'> + Home + </BreadcrumbLink> + </BreadcrumbItem> + + <BreadcrumbItem> + <BreadcrumbLink + as={Link} + href='/shop/brands' + className='!text-danger-500 whitespace-nowrap' + > + Brands + </BreadcrumbLink> + </BreadcrumbItem> + + <BreadcrumbItem isCurrentPage> + <BreadcrumbLink className='whitespace-nowrap'>{brandName}</BreadcrumbLink> + </BreadcrumbItem> + </ChakraBreadcrumb> + </div> + ) +} + +export default Breadcrumb |