dynamic filter, dynamic pagination, detail brand, to title case

1 files changed, 2 insertions, 10 deletions

diff --git a/src/pages/shop/brands.js b/src/pages/shop/brands.js
index 5d93bf4b..6c1f1816 100644
--- a/src/pages/shop/brands.js
+++ b/src/pages/shop/brands.js
@@ -1,13 +1,10 @@
-import { LazyLoadImage } from "react-lazy-load-image-component";
 import Header from "../../components/Header";
 import apiOdoo from "../../helpers/apiOdoo";
-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 Spinner from "../../components/Spinner";
 import Layout from "../../components/Layout";
+import ManufactureCard from "../../components/ManufactureCard";
 
 export async function getServerSideProps() {
   let initialManufactures = await apiOdoo('GET', '/api/v1/manufacture?limit=31');
@@ -24,7 +21,6 @@ export default function Brands({ initialManufactures }) {
 
   const getMoreManufactures = async () => {
     const name = manufactureStartwith != '' ? `${manufactureStartwith}%` : '';
-    console.log(manufactures, manufactures.length);
     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]);
@@ -69,11 +65,7 @@ export default function Brands({ initialManufactures }) {
           >
             {manufactures?.map((manufacture, index) => (
               manufacture.name ? (
-                <Link href={`/shop/brands/${createSlug(manufacture.name, manufacture.id)}`} className="flex justify-center items-center border border-gray-300 p-1 rounded h-16 text-gray-800 text-sm text-center bg-white" key={index}>
-                  {manufacture.logo ? (
-                    <LazyLoadImage effect="blur" src={manufacture.logo} alt={manufacture.name || ''} className="w-full max-h-full object-contain object-center" />
-                  ) : manufacture.name}
-                </Link>
+                <ManufactureCard data={manufacture} key={index} />
               ) : ''
             ))}
           </InfiniteScroll>