Merapihkan struktur folder

1 files changed, 44 insertions, 0 deletions

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