From f99e0aba70efad0deb907d8e27f09fc9f527c8a4 Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <zadanlyr@gmail.com>
Date: Fri, 17 Feb 2023 17:07:50 +0700
Subject: Refactor

---
 src2/components/elements/Skeleton.js | 48 ++++++++++++++++++++++++++++++++++++
 1 file changed, 48 insertions(+)
 create mode 100644 src2/components/elements/Skeleton.js

(limited to 'src2/components/elements/Skeleton.js')

diff --git a/src2/components/elements/Skeleton.js b/src2/components/elements/Skeleton.js
new file mode 100644
index 00000000..fbdbc245
--- /dev/null
+++ b/src2/components/elements/Skeleton.js
@@ -0,0 +1,48 @@
+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) => (
+      <div className="flex items-center justify-between" key={i}>
+        <div>
+            <div className="h-2.5 bg-gray-300 rounded-full w-24 mb-2.5"></div>
+            <div className="w-32 h-2 bg-gray-200 rounded-full"></div>
+        </div>
+        <div className="h-2.5 bg-gray-300 rounded-full w-12"></div>
+    </div>
+    )) }
+    <span className="sr-only">Loading...</span>
+  </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,
+  SkeletonProduct
+};
\ No newline at end of file
-- 
cgit v1.2.3