From f1d9a308f61e67f4c896608e73ac8413f61fa8af Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Wed, 11 Oct 2023 10:22:11 +0700
Subject: Add breadcrumb on detail product, search, brand, category page

---
 src/lib/brand/components/Brand.jsx      |  4 ++--
 src/lib/brand/components/Breadcrumb.jsx | 40 +++++++++++++++++++++++++++++++++
 2 files changed, 42 insertions(+), 2 deletions(-)
 create mode 100644 src/lib/brand/components/Breadcrumb.jsx

(limited to 'src/lib/brand')

diff --git a/src/lib/brand/components/Brand.jsx b/src/lib/brand/components/Brand.jsx
index 3c411969..3985b888 100644
--- a/src/lib/brand/components/Brand.jsx
+++ b/src/lib/brand/components/Brand.jsx
@@ -84,7 +84,7 @@ const Brand = ({ id }) => {
       </MobileView>
 
       <DesktopView>
-        <div className='container mx-auto mt-10 mb-3'>
+        <div className='container mx-auto'>
           <div className='min-h-[150px]'>
             {brand.isLoading && <ImageSkeleton />}
             {brand.data?.banners?.length == 0 && (
@@ -117,6 +117,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 && (
@@ -137,7 +138,6 @@ const Brand = ({ id }) => {
               </>
             )}
           </div>
-          <Divider />
         </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
-- 
cgit v1.2.3


From cff358b2a7bb310e2b65cba5d843e9ffdda0f699 Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Wed, 11 Oct 2023 14:07:58 +0700
Subject: Fix description and brand banner skeleton

---
 src/lib/brand/components/Brand.jsx | 121 ++++++++++++++++++++-----------------
 1 file changed, 67 insertions(+), 54 deletions(-)

(limited to 'src/lib/brand')

diff --git a/src/lib/brand/components/Brand.jsx b/src/lib/brand/components/Brand.jsx
index 3985b888..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'>
-          <div className='min-h-[150px]'>
-            {brand.isLoading && <ImageSkeleton />}
+          <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
@@ -137,7 +150,7 @@ const Brand = ({ id }) => {
                 </div>
               </>
             )}
-          </div>
+          </Skeleton>
         </div>
       </DesktopView>
     </>
-- 
cgit v1.2.3