From c5dace224323287f927ba352712743fe2eaca241 Mon Sep 17 00:00:00 2001
From: IT Fixcomart <it@fixcomart.co.id>
Date: Fri, 4 Nov 2022 11:40:55 +0700
Subject: Add popular product and ready stock product in home

---
 src/components/ProductCard.js           |  5 ++++
 src/components/product/ProductSlider.js | 44 +++++++++++++++++++++++++++++++++
 2 files changed, 49 insertions(+)
 create mode 100644 src/components/product/ProductSlider.js

(limited to 'src/components')

diff --git a/src/components/ProductCard.js b/src/components/ProductCard.js
index 250a5c7d..360e11ff 100644
--- a/src/components/ProductCard.js
+++ b/src/components/ProductCard.js
@@ -32,6 +32,11 @@ export default function ProductCard({ data }) {
             </div>
           ) : ''}
           <p className="text-sm text-gray-900 font-semibold">{product.lowest_price.price_discount > 0 ? currencyFormat(product.lowest_price.price_discount) : 'Tanya harga'}</p>
+          {product.stock_total > 0 ? (
+            <div className="badge-yellow bg-green-200 text-green-700 w-fit mt-2">Ready Stock</div>
+          ) : (
+            <div className="h-6"></div>
+          )}
         </div>
       </div>
     </div>
diff --git a/src/components/product/ProductSlider.js b/src/components/product/ProductSlider.js
new file mode 100644
index 00000000..26584d8a
--- /dev/null
+++ b/src/components/product/ProductSlider.js
@@ -0,0 +1,44 @@
+import { Swiper, SwiperSlide } from "swiper/react";
+import ProductCard from "../ProductCard";
+import ImagePlaceholderIcon from "../../icons/image-placeholder.svg";
+import "swiper/css";
+
+export default function ProductSlider({ products }) {
+  return (
+    <>
+      <Swiper freeMode={true} slidesPerView={2.15} spaceBetween={8}>
+        {products?.products?.map((product, index) => (
+          <SwiperSlide key={index}>
+            <ProductCard data={product} />
+          </SwiperSlide>
+        ))}
+      </Swiper>
+      {products == null ? (
+        <div className="grid grid-cols-2 gap-x-4">
+          <div role="status" className="p-4 max-w-sm rounded border border-gray-300 shadow animate-pulse md:p-6">
+            <div className="flex justify-center items-center mb-4 h-48 bg-gray-300 rounded">
+            <ImagePlaceholderIcon className="w-12 h-12 text-gray-200" />
+            </div>
+            <div className="h-2 bg-gray-200 rounded-full w-10 mb-1"></div>
+            <div className="h-2.5 bg-gray-200 rounded-full w-full mb-4"></div>
+            <div className="h-2 bg-gray-200 rounded-full mb-2.5"></div>
+            <div className="h-2 bg-gray-200 rounded-full mb-2.5"></div>
+            <div className="h-2 bg-gray-200 rounded-full"></div>
+            <span className="sr-only">Loading...</span>
+          </div>
+          <div role="status" className="p-4 max-w-sm rounded border border-gray-300 shadow animate-pulse md:p-6">
+            <div className="flex justify-center items-center mb-4 h-48 bg-gray-300 rounded">
+              <ImagePlaceholderIcon className="w-12 h-12 text-gray-200" />
+            </div>
+            <div className="h-2 bg-gray-200 rounded-full w-10 mb-1"></div>
+            <div className="h-2.5 bg-gray-200 rounded-full w-full mb-4"></div>
+            <div className="h-2 bg-gray-200 rounded-full mb-2.5"></div>
+            <div className="h-2 bg-gray-200 rounded-full mb-2.5"></div>
+            <div className="h-2 bg-gray-200 rounded-full"></div>
+            <span className="sr-only">Loading...</span>
+          </div>
+        </div>
+      ) : ''}
+    </>
+  )
+}
\ No newline at end of file
-- 
cgit v1.2.3