From ad46d122029999b7639657936068c4643f3572eb Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Tue, 31 Jan 2023 16:30:13 +0700
Subject: Product skeleton

---
 src/components/elements/Skeleton.js | 32 +++++++++++++++++++++++++++++++-
 1 file changed, 31 insertions(+), 1 deletion(-)

(limited to 'src/components/elements')

diff --git a/src/components/elements/Skeleton.js b/src/components/elements/Skeleton.js
index 0a0bbc78..fbdbc245 100644
--- a/src/components/elements/Skeleton.js
+++ b/src/components/elements/Skeleton.js
@@ -1,3 +1,5 @@
+import ImagePlaceholderIcon from "../../icons/image-placeholder.svg";
+
 const SkeletonList = ({ number }) => (
   <div role="status" className="space-y-6 animate-pulse">
     { Array.from(Array(number), (e, i) => (
@@ -13,6 +15,34 @@ const SkeletonList = ({ number }) => (
   </div>
 );
 
+const SkeletonProduct = () => (
+  <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>
+);
+
 export {
-  SkeletonList
+  SkeletonList,
+  SkeletonProduct
 };
\ No newline at end of file
-- 
cgit v1.2.3