Brand alphabet slider

1 files changed, 11 insertions, 15 deletions

diff --git a/src/pages/shop/brands.js b/src/pages/shop/brands.js
index 5b49c922..8a7b7684 100644
--- a/src/pages/shop/brands.js
+++ b/src/pages/shop/brands.js
@@ -5,11 +5,9 @@ import "react-lazy-load-image-component/src/effects/blur.css";
 import Link from "../../components/Link";
 import { createSlug } from "../../helpers/slug";
 import InfiniteScroll from "react-infinite-scroll-component";
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import Spinner from "../../components/Spinner";
 import Layout from "../../components/Layout";
-import { Swiper, SwiperSlide } from "swiper/react";
-import "swiper/css";
 
 export async function getServerSideProps() {
   let initialManufactures = await apiOdoo('GET', '/api/v1/manufacture?limit=31');
@@ -24,12 +22,12 @@ export default function Brands({ initialManufactures }) {
   const alpha = Array.from(Array(26)).map((e, i) => i + 65);
   const alphabets = alpha.map((x) => String.fromCharCode(x));
 
-  const getMoreManufactures = async () => {
+  const getMoreManufactures = useCallback(async () => {
     const name = manufactureStartwith != '' ? `${manufactureStartwith}%` : '';
     const result = await apiOdoo('GET', `/api/v1/manufacture?limit=30&offset=${manufactures.length}&name=${name}`);
     setHasMoreManufacture(manufactures.length + 30 < result.manufacture_total)
     setManufactures((manufactures) => [...manufactures, ...result.manufactures]);
-  };
+  }, [manufactureStartwith]);
 
   const filterManufactureStartWith = (character) => {
     setManufactures([]);
@@ -42,28 +40,26 @@ export default function Brands({ initialManufactures }) {
 
   useEffect(() => {
     getMoreManufactures();
-  }, [manufactureStartwith]);
+  }, [getMoreManufactures]);
 
   return (
     <>
       <Header title='Semua Brand di Indoteknik' />
       <Layout>
         <div className="p-4">
-          <h1 className="mb-2">Semua Brand di Indoteknik</h1>
-          <Swiper slidesPerView={10} freeMode={true}>
+          <h1>Semua Brand di Indoteknik</h1>
+          <div className="flex overflow-x-auto gap-x-4 py-2">
             {alphabets.map((alphabet, index) => (
-              <SwiperSlide key={index}>
-                <button className={"p-2 py-1 border border-gray-300 rounded" + (manufactureStartwith == alphabet ? ' bg-yellow-900 border-yellow-900 ' : '')} onClick={() => filterManufactureStartWith(alphabet)}>
-                  {alphabet}
-                </button>
-              </SwiperSlide>
+              <button key={index} className={"p-2 py-1 border bg-white border-gray-300 rounded" + (manufactureStartwith == alphabet ? ' bg-yellow-900 border-yellow-900 ' : '')} onClick={() => filterManufactureStartWith(alphabet)}>
+                {alphabet}
+              </button>
             ))}
-          </Swiper>
+          </div>
           <InfiniteScroll
             dataLength={manufactures.length}
             next={getMoreManufactures}
             hasMore={hasMoreManufacture}
-            className="grid grid-cols-3 gap-4 mt-8 !overflow-x-hidden"
+            className="grid grid-cols-3 gap-4 mt-6 !overflow-x-hidden"
             loader={
               <div className="flex justify-center items-center border border-gray-300 p-2 rounded h-14">
                 <Spinner className="w-6 h-6 text-gray-600 fill-gray-900"/>