brand with infinite scroll and fix product card style

5 files changed, 71 insertions, 10 deletions

diff --git a/package.json b/package.json
index b89254af..b579f676 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
     "nodemailer": "^6.8.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-infinite-scroll-component": "^6.1.0",
     "react-lazy-load-image-component": "^1.5.5",
     "react-toastify": "^9.1.1",
     "swiper": "^8.4.4"
diff --git a/src/components/Alert.js b/src/components/Alert.js
index 3dddd56e..68fb84b1 100644
--- a/src/components/Alert.js
+++ b/src/components/Alert.js
@@ -2,10 +2,10 @@ const Alert = ({ children, className, type }) => {
   let typeClass = '';
   switch (type) {
     case 'info':
-      typeClass = ' bg-blue-200 text-blue-900 '
+      typeClass = ' bg-blue-100 text-blue-900 '
       break;
     case 'success':
-      typeClass = ' bg-green-200 text-green-900 '
+      typeClass = ' bg-green-100 text-green-900 '
       break;
   }
   return (
diff --git a/src/components/ProductCard.js b/src/components/ProductCard.js
index 23cc0665..af96de28 100644
--- a/src/components/ProductCard.js
+++ b/src/components/ProductCard.js
@@ -10,10 +10,10 @@ export default function ProductCard({ data }) {
   let product = data;
   return (
     <div className="product-card">
-      <Link href={'/shop/product/' + createSlug(product.name, product.id)} className="block relative">
+      <Link href={'/shop/product/' + createSlug(product.name, product.id)} className="block relative bg-white">
         <LazyLoadImage effect="blur" src={product.image ? product.image : '/images/noimage.jpeg'} alt={product.name} className="product-card__image" />
         {product.variant_total > 1 ? (
-          <div className="absolute bottom-2 left-2 badge-yellow">{product.variant_total} Varian</div>
+          <div className="absolute bottom-2 left-2 badge-green">{product.variant_total} Varian</div>
         ) : ''}
       </Link>
       <div className="product-card__description">
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
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 2ff05c47..5d741ab4 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -9,6 +9,7 @@ html, body {
         w-screen
         text-base
         text-gray-900
+        bg-gray-100
     ;
 }
 
@@ -163,20 +164,25 @@ html, body {
 }
 
 @layer utilities {
-    .wrap-line-ellipsis-2 {
+    .wrap-line-ellipsis-1,
+    .wrap-line-ellipsis-2,
+    .wrap-line-ellipsis-3 {
         display: -webkit-box;
-        -webkit-line-clamp: 2;
         -webkit-box-orient: vertical;
         overflow: hidden;
         text-overflow: ellipsis;
     }
+
+    .wrap-line-ellipsis-1 {
+        -webkit-line-clamp: 1;
+    }
+
+    .wrap-line-ellipsis-2 {
+        -webkit-line-clamp: 2;
+    }
     
     .wrap-line-ellipsis-3 {
-        display: -webkit-box;
         -webkit-line-clamp: 3;
-        -webkit-box-orient: vertical;
-        overflow: hidden;
-        text-overflow: ellipsis;
     }
 }