Merapihkan struktur folder

2 files changed, 110 insertions, 0 deletions

diff --git a/src/components/products/ProductCard.js b/src/components/products/ProductCard.js
new file mode 100644
index 00000000..e32463a7
--- /dev/null
+++ b/src/components/products/ProductCard.js
@@ -0,0 +1,66 @@
+import Link from "../elements/Link";
+import currencyFormat from "@/core/utils/currencyFormat";
+import { createSlug } from "@/core/utils/slug";
+import { ChevronRightIcon } from "@heroicons/react/20/solid";
+import Image from "../elements/Image";
+
+
+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 bg-white">
+        <Image 
+          src={product.image}
+          alt={product.name}
+          className="product-card__image"
+        />
+        {product.variant_total > 1 ? (
+          <div className="absolute bottom-2 left-2 badge-gray">{product.variant_total} Varian</div>
+        ) : ''}
+      </Link>
+      <div className="product-card__content">
+        <div>
+          {typeof product.manufacture.name !== "undefined" ? (
+            <Link href={'/shop/brands/' + createSlug(product.manufacture.name, product.manufacture.id)} className="product-card__brand">{product.manufacture.name}</Link>
+          ) : (
+            <span className="product-card__brand">-</span>
+          )}
+          <Link href={'/shop/product/' + createSlug(product.name, product.id)} className="product-card__title wrap-line-ellipsis-3">
+            {product.name}
+          </Link>
+        </div>
+        <div className="mt-2">
+          {product.lowest_price.discount_percentage > 0 ? (
+            <div className="flex gap-x-1 items-center mb-1">
+              <p className="text-caption-2 text-gray_r-11 line-through">{currencyFormat(product.lowest_price.price)}</p>
+              <span className="badge-red">{product.lowest_price.discount_percentage}%</span>
+            </div>
+          ) : ''}
+          
+          {product.lowest_price.price_discount > 0 ? (
+            <p className="text-caption-1 text-gray_r-12 font-bold">
+              {currencyFormat(product.lowest_price.price_discount)}
+            </p>
+          ) : (
+            <a 
+              href="https://wa.me" 
+              target="_blank" 
+              rel="noreferrer" 
+              className="flex items-center gap-x-1 text-caption-1"
+            >
+              Tanya Harga <ChevronRightIcon className="text-yellow_r-11 w-5 h-5" />
+            </a>
+          )}
+          
+          {product.stock_total > 0 ? (
+            <div className="flex gap-x-1 mt-2">
+              <div className="badge-green">Ready Stock</div>
+              <div className="badge-gray">{product.stock_total > 5 ? '> 5' : '< 5'}</div>
+            </div>
+          ) : ''}
+        </div>
+      </div>
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/src/components/products/ProductSlider.js b/src/components/products/ProductSlider.js
new file mode 100644
index 00000000..ddc505c7
--- /dev/null
+++ b/src/components/products/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.2} 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