brand with infinite scroll and fix product card style

1 files changed, 54 insertions, 0 deletions

diff --git a/src/pages/shop/brands.js b/src/pages/shop/brands.js
new file mode 100644
index 00000000..f39839af
--- /dev/null
+++ b/src/pages/shop/brands.js
@@ -0,0 +1,54 @@
+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 "next/link";
+import { createSlug } from "../../helpers/slug";
+import InfiniteScroll from "react-infinite-scroll-component";
+import { useState } from "react";
+import Spinner from "../../components/Spinner";
+
+export async function getServerSideProps() {
+  let initialManufactures = await apiOdoo('GET', '/api/v1/manufacture?limit=31');
+  return {props: {initialManufactures}};
+}
+
+export default function Brands({ initialManufactures }) {
+  const [manufactures, setManufactures] = useState(initialManufactures.manufactures);
+  const [hasMoreManufacture, setHasMoreManufacture] = useState(true);
+
+  const getMoreManufactures = async () => {
+    const result = await apiOdoo('GET', `/api/v1/manufacture?limit=31&offset=${manufactures.length}`);
+    if (manufactures.length + 30 >= result.manufacture_total) setHasMoreManufacture(false);
+    setManufactures((manufactures) => [...manufactures, ...result.manufactures]);
+  };
+  return (
+    <>
+      <Header title='Semua Brand di Indoteknik' />
+      <main className="p-4">
+        <h1>Semua Brand di Indoteknik</h1>
+        <InfiniteScroll
+          dataLength={manufactures.length}
+          next={getMoreManufactures}
+          hasMore={hasMoreManufacture}
+          className="grid grid-cols-3 gap-4 mt-4 !overflow-x-hidden"
+          loader={
+            <div className="flex justify-center items-center border border-gray-300 p-1 rounded h-14">
+              <Spinner className="w-6 h-6 text-gray-600 fill-gray-900"/>
+            </div>
+          }
+        >
+          {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-14 text-gray-800 text-sm text-center" 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>
+            ) : ''
+          ))}
+        </InfiniteScroll>
+      </main>
+    </>
+  )
+}
\ No newline at end of file