<hafid> export xls&csv

1 files changed, 90 insertions, 0 deletions

diff --git a/src/lib/home/components/MediaBrand.jsx b/src/lib/home/components/MediaBrand.jsx
new file mode 100644
index 00000000..b7a30503
--- /dev/null
+++ b/src/lib/home/components/MediaBrand.jsx
@@ -0,0 +1,90 @@
+import { Swiper, SwiperSlide } from 'swiper/react';
+import { Navigation, Pagination, Autoplay } from 'swiper';
+import { useCallback, useEffect, useState } from 'react';
+import usePreferredBrand from '../hooks/usePreferredBrand';
+import PreferredBrandSkeleton from './Skeleton/PreferredBrandSkeleton';
+import BrandCard from '@/lib/brand/components/BrandCard';
+import useDevice from '@/core/hooks/useDevice';
+import Link from '@/core/components/elements/Link/Link';
+import axios from 'axios';
+
+const PreferredBrand = () => {
+  let query = '';
+  let params = 'prioritas';
+  const [isLoading, setIsLoading] = useState(true);
+  const [startWith, setStartWith] = useState(null);
+  const [manufactures, setManufactures] = useState([]);
+
+  const loadBrand = useCallback(async () => {
+    setIsLoading(true);
+    const name = startWith ? `${startWith}*` : '';
+    const result = await axios(
+      `${process.env.NEXT_PUBLIC_SELF_HOST}/api/shop/preferredBrand?rows=20`
+    );
+    setIsLoading(false);
+    setManufactures((manufactures) => [...result.data]);
+  }, [startWith]);
+
+  const toggleStartWith = (alphabet) => {
+    setManufactures([]);
+    if (alphabet == startWith) {
+      setStartWith(null);
+      return;
+    }
+    setStartWith(alphabet);
+  };
+
+  useEffect(() => {
+    loadBrand();
+  }, []);
+
+  // const { preferredBrands } = usePreferredBrand(query)
+  const { isMobile, isDesktop } = useDevice();
+  const swiperBanner = {
+    modules: [Navigation, Pagination, Autoplay],
+    autoplay: {
+      delay: 4000,
+      disableOnInteraction: false,
+    },
+    loop: true,
+    className: 'h-[70px] md:h-[100px] w-full',
+    slidesPerView: isMobile ? 4 : 8,
+    spaceBetween: isMobile ? 12 : 0,
+    pagination: {
+      dynamicBullets: true,
+      dynamicMainBullets: isMobile ? 6 : 8,
+      clickable: true,
+    },
+  };
+  const preferredBrandsData = manufactures ? manufactures.slice(0, 20) : [];
+  return (
+    <div className='px-4 sm:px-0'>
+      <div className='flex justify-between items-center mb-4'>
+        <h1 className='font-semibold text-[14px] sm:text-h-lg'>
+          <Link href='/shop/brands' className='!text-black font-semibold'>
+            Brand Pilihan
+          </Link>
+        </h1>
+        {isDesktop && (
+          <Link href='/shop/brands' className='!text-red-500 font-semibold'>
+            Lihat Semua
+          </Link>
+        )}
+      </div>
+      <div className=''>
+        {manufactures.isLoading && <PreferredBrandSkeleton />}
+        {!manufactures.isLoading && (
+          <Swiper {...swiperBanner}>
+            {preferredBrandsData.map((manufacture) => (
+              <SwiperSlide key={manufacture.id}>
+                <BrandCard brand={manufacture} />
+              </SwiperSlide>
+            ))}
+          </Swiper>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default PreferredBrand;