From f99e0aba70efad0deb907d8e27f09fc9f527c8a4 Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Fri, 17 Feb 2023 17:07:50 +0700
Subject: Refactor

---
 src/lib/brand/components/Brand.jsx     | 70 ++++++++++++++++++++++++++++++++++
 src/lib/brand/components/BrandCard.jsx | 20 ++++++++++
 2 files changed, 90 insertions(+)
 create mode 100644 src/lib/brand/components/Brand.jsx
 create mode 100644 src/lib/brand/components/BrandCard.jsx

(limited to 'src/lib/brand/components')

diff --git a/src/lib/brand/components/Brand.jsx b/src/lib/brand/components/Brand.jsx
new file mode 100644
index 00000000..a42f4c81
--- /dev/null
+++ b/src/lib/brand/components/Brand.jsx
@@ -0,0 +1,70 @@
+import useBrand from "../hooks/useBrand"
+import Image from "@/core/components/elements/Image/Image"
+
+import { Swiper, SwiperSlide } from "swiper/react"
+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"
+
+const swiperBanner = {
+  pagination: { dynamicBullets: true },
+  autoplay: {
+    delay: 6000,
+    disableOnInteraction: false
+  },
+  modules: [Pagination, Autoplay]
+}
+
+const Brand = ({ id }) => {
+  const { brand } = useBrand({ id })
+  
+  return (
+    <>
+      <div className="min-h-[200px]">
+        { brand.isLoading && <ImageSkeleton /> }
+        { 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`}
+                    className="w-full h-auto"
+                  />
+                </SwiperSlide>
+              )) }
+            </Swiper>
+            <div className="p-4 pt-2">
+              <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"
+                />
+              ) }
+              { !brand?.data?.logo && (
+                <div className="bg-red_r-10 text-white text-center text-caption-1 py-2 px-4 rounded w-fit">
+                  { brand?.data?.name }
+                </div>
+              ) }
+            </div>
+          </>
+        ) }
+      </div>
+      <Divider />
+    </>
+  )
+}
+
+export default Brand
\ No newline at end of file
diff --git a/src/lib/brand/components/BrandCard.jsx b/src/lib/brand/components/BrandCard.jsx
new file mode 100644
index 00000000..8783010e
--- /dev/null
+++ b/src/lib/brand/components/BrandCard.jsx
@@ -0,0 +1,20 @@
+import Image from "@/core/components/elements/Image/Image"
+import Link from "@/core/components/elements/Link/Link"
+import { createSlug } from "@/core/utils/slug"
+
+const BrandCard = ({ brand }) => {
+  return (
+    <Link 
+      href={createSlug('/shop/brands/', brand.name, brand.id)} 
+      className="py-1 px-2 rounded border border-gray_r-6"
+    >
+      <Image 
+        src={brand.logo}
+        alt={brand.name}
+        className="h-10 object-contain object-center"
+      />
+    </Link>
+  )
+}
+
+export default BrandCard
\ No newline at end of file
-- 
cgit v1.2.3


From 347e28848fb063ffcb7f9268384409e57b7ef3ad Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Sat, 18 Feb 2023 22:08:07 +0700
Subject: change animation

---
 src/lib/brand/components/Brand.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'src/lib/brand/components')

diff --git a/src/lib/brand/components/Brand.jsx b/src/lib/brand/components/Brand.jsx
index a42f4c81..c1215976 100644
--- a/src/lib/brand/components/Brand.jsx
+++ b/src/lib/brand/components/Brand.jsx
@@ -23,7 +23,7 @@ const Brand = ({ id }) => {
   
   return (
     <>
-      <div className="min-h-[200px]">
+      <div className="min-h-[150px]">
         { brand.isLoading && <ImageSkeleton /> }
         { brand.data && (
           <>
@@ -44,7 +44,7 @@ const Brand = ({ id }) => {
                 </SwiperSlide>
               )) }
             </Swiper>
-            <div className="p-4 pt-2">
+            <div className="p-4">
               <div className="text-caption-1 text-gray_r-11 mb-2">Produk dari brand:</div>
               { brand?.data?.logo && (
                 <Image 
-- 
cgit v1.2.3


From f66b12fd1d0b83af0d7230d7b1565fbe00afbe3c Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Wed, 22 Feb 2023 11:03:34 +0700
Subject: prettier

---
 src/lib/brand/components/Brand.jsx     | 66 +++++++++++++++++-----------------
 src/lib/brand/components/BrandCard.jsx | 20 +++++------
 2 files changed, 41 insertions(+), 45 deletions(-)

(limited to 'src/lib/brand/components')

diff --git a/src/lib/brand/components/Brand.jsx b/src/lib/brand/components/Brand.jsx
index c1215976..c338c4c4 100644
--- a/src/lib/brand/components/Brand.jsx
+++ b/src/lib/brand/components/Brand.jsx
@@ -1,13 +1,13 @@
-import useBrand from "../hooks/useBrand"
-import Image from "@/core/components/elements/Image/Image"
+import useBrand from '../hooks/useBrand'
+import Image from '@/core/components/elements/Image/Image'
 
-import { Swiper, SwiperSlide } from "swiper/react"
-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 { Swiper, SwiperSlide } from 'swiper/react'
+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'
 
 const swiperBanner = {
   pagination: { dynamicBullets: true },
@@ -20,51 +20,51 @@ const swiperBanner = {
 
 const Brand = ({ id }) => {
   const { brand } = useBrand({ id })
-  
+
   return (
     <>
-      <div className="min-h-[150px]">
-        { brand.isLoading && <ImageSkeleton /> }
-        { brand.data && (
+      <div className='min-h-[150px]'>
+        {brand.isLoading && <ImageSkeleton />}
+        {brand.data && (
           <>
             <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'
             >
-              { brand.data?.banners?.map((banner, index) => (
+              {brand.data?.banners?.map((banner, index) => (
                 <SwiperSlide key={index}>
-                  <Image 
+                  <Image
                     src={banner}
                     alt={`Brand ${brand.data?.name} - Indoteknik`}
-                    className="w-full h-auto"
+                    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={brand?.data?.logo} 
-                  alt={brand?.data?.name} 
-                  className="w-32 p-2 border borde-gray_r-6 rounded"
+            <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'
                 />
-              ) }
-              { !brand?.data?.logo && (
-                <div className="bg-red_r-10 text-white text-center text-caption-1 py-2 px-4 rounded w-fit">
-                  { brand?.data?.name }
+              )}
+              {!brand?.data?.logo && (
+                <div className='bg-red_r-10 text-white text-center text-caption-1 py-2 px-4 rounded w-fit'>
+                  {brand?.data?.name}
                 </div>
-              ) }
+              )}
             </div>
           </>
-        ) }
+        )}
       </div>
       <Divider />
     </>
   )
 }
 
-export default Brand
\ No newline at end of file
+export default Brand
diff --git a/src/lib/brand/components/BrandCard.jsx b/src/lib/brand/components/BrandCard.jsx
index 8783010e..0dbdc075 100644
--- a/src/lib/brand/components/BrandCard.jsx
+++ b/src/lib/brand/components/BrandCard.jsx
@@ -1,20 +1,16 @@
-import Image from "@/core/components/elements/Image/Image"
-import Link from "@/core/components/elements/Link/Link"
-import { createSlug } from "@/core/utils/slug"
+import Image from '@/core/components/elements/Image/Image'
+import Link from '@/core/components/elements/Link/Link'
+import { createSlug } from '@/core/utils/slug'
 
 const BrandCard = ({ brand }) => {
   return (
-    <Link 
-      href={createSlug('/shop/brands/', brand.name, brand.id)} 
-      className="py-1 px-2 rounded border border-gray_r-6"
+    <Link
+      href={createSlug('/shop/brands/', brand.name, brand.id)}
+      className='py-1 px-2 rounded border border-gray_r-6'
     >
-      <Image 
-        src={brand.logo}
-        alt={brand.name}
-        className="h-10 object-contain object-center"
-      />
+      <Image src={brand.logo} alt={brand.name} className='h-10 object-contain object-center' />
     </Link>
   )
 }
 
-export default BrandCard
\ No newline at end of file
+export default BrandCard
-- 
cgit v1.2.3


From ac3fdf7be9982e65d8f83a20bc487f8dd62e3bfc Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Wed, 22 Feb 2023 23:36:47 +0700
Subject: fix

---
 src/lib/brand/components/BrandCard.jsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

(limited to 'src/lib/brand/components')

diff --git a/src/lib/brand/components/BrandCard.jsx b/src/lib/brand/components/BrandCard.jsx
index 0dbdc075..e981c0d5 100644
--- a/src/lib/brand/components/BrandCard.jsx
+++ b/src/lib/brand/components/BrandCard.jsx
@@ -8,7 +8,11 @@ const BrandCard = ({ brand }) => {
       href={createSlug('/shop/brands/', brand.name, brand.id)}
       className='py-1 px-2 rounded border border-gray_r-6'
     >
-      <Image src={brand.logo} alt={brand.name} className='h-10 object-contain object-center' />
+      <Image
+        src={brand.logo}
+        alt={brand.name}
+        className='h-10 object-contain object-center'
+      />
     </Link>
   )
 }
-- 
cgit v1.2.3


From 2dd5b10049ff62656f160a9aa5b6627cd7ccbefc Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Thu, 23 Feb 2023 15:29:35 +0700
Subject: fix

---
 src/lib/brand/components/BrandCard.jsx | 22 +++++++---
 src/lib/brand/components/Brands.jsx    | 80 ++++++++++++++++++++++++++++++++++
 2 files changed, 96 insertions(+), 6 deletions(-)
 create mode 100644 src/lib/brand/components/Brands.jsx

(limited to 'src/lib/brand/components')

diff --git a/src/lib/brand/components/BrandCard.jsx b/src/lib/brand/components/BrandCard.jsx
index e981c0d5..1bcdb5ab 100644
--- a/src/lib/brand/components/BrandCard.jsx
+++ b/src/lib/brand/components/BrandCard.jsx
@@ -6,13 +6,23 @@ const BrandCard = ({ brand }) => {
   return (
     <Link
       href={createSlug('/shop/brands/', brand.name, brand.id)}
-      className='py-1 px-2 rounded border border-gray_r-6'
+      className='py-1 px-2 rounded border border-gray_r-6 h-12 flex justify-center items-center'
     >
-      <Image
-        src={brand.logo}
-        alt={brand.name}
-        className='h-10 object-contain object-center'
-      />
+      {brand.logo && (
+        <Image
+          src={brand.logo}
+          alt={brand.name}
+          className='h-full object-contain object-center'
+        />
+      )}
+      {!brand.logo && (
+        <span
+          className='text-center'
+          style={{ fontSize: `${14 - brand.name.length * 0.5}px` }}
+        >
+          {brand.name}
+        </span>
+      )}
     </Link>
   )
 }
diff --git a/src/lib/brand/components/Brands.jsx b/src/lib/brand/components/Brands.jsx
new file mode 100644
index 00000000..22f47975
--- /dev/null
+++ b/src/lib/brand/components/Brands.jsx
@@ -0,0 +1,80 @@
+import odooApi from '@/core/api/odooApi'
+import Spinner from '@/core/components/elements/Spinner/Spinner'
+import { useCallback, useEffect, useState } from 'react'
+import BrandCard from './BrandCard'
+
+const Brands = () => {
+  const alpha = Array.from(Array(26)).map((e, i) => i + 65)
+  const alphabets = alpha.map((x) => String.fromCharCode(x))
+
+  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 odooApi(
+      'GET',
+      `/api/v1/manufacture?limit=0&offset=${manufactures.length}&name=${name}`
+    )
+    setIsLoading(false)
+    setManufactures((manufactures) => [...manufactures, ...result.manufactures])
+  }, [startWith])
+
+  const toggleStartWith = (alphabet) => {
+    setManufactures([])
+    if (alphabet == startWith) {
+      setStartWith(null)
+      return
+    }
+    setStartWith(alphabet)
+  }
+
+  useEffect(() => {
+    loadBrand()
+  }, [loadBrand])
+
+  if (isLoading) {
+    return (
+      <div className='flex justify-center my-4'>
+        <Spinner className='w-6 text-gray_r-12/50 fill-gray_r-12' />
+      </div>
+    )
+  }
+
+  return (
+    <div className='p-4'>
+      <h1 className='font-semibold'>Semua Brand di Indoteknik</h1>
+      <div className='flex overflow-x-auto gap-x-2 py-2'>
+        {alphabets.map((alphabet, index) => (
+          <button
+            key={index}
+            className={
+              'p-2 py-1 border bg-white border-gray_r-6 rounded w-10 flex-shrink-0' +
+              (startWith == alphabet ? ' !bg-yellow_r-9 border-yellow_r-9 ' : '')
+            }
+            type='button'
+            onClick={() => toggleStartWith(alphabet)}
+          >
+            {alphabet}
+          </button>
+        ))}
+      </div>
+
+      <div className='grid grid-cols-4 gap-4 mt-4 !overflow-x-hidden'>
+        {manufactures?.map(
+          (manufacture, index) =>
+            manufacture.name && (
+              <BrandCard
+                brand={manufacture}
+                key={index}
+              />
+            )
+        )}
+      </div>
+    </div>
+  )
+}
+
+export default Brands
-- 
cgit v1.2.3