2 files changed, 96 insertions, 6 deletions
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