From abd2e9eae4e819e157a1a4e3820e1b8375f553f0 Mon Sep 17 00:00:00 2001
From: Rafi Zadanly <rafizadanly@gmail.com>
Date: Wed, 28 Dec 2022 10:41:30 +0700
Subject: Progress Bar Component

---
 src/components/ProgressBar.js | 26 ++++++++++++++++++++++++++
 1 file changed, 26 insertions(+)
 create mode 100644 src/components/ProgressBar.js

(limited to 'src/components/ProgressBar.js')

diff --git a/src/components/ProgressBar.js b/src/components/ProgressBar.js
new file mode 100644
index 00000000..cdb55205
--- /dev/null
+++ b/src/components/ProgressBar.js
@@ -0,0 +1,26 @@
+import { CheckIcon } from "@heroicons/react/24/outline";
+import { CheckCircleIcon } from "@heroicons/react/24/solid";
+
+const ProgressBar = ({ current, labels }) => {
+  return (
+    <div className="bg-gray_r-1 flex gap-x-2 p-4 rounded-md">
+      {labels.map((label, index) => (
+        <>
+          <div className={"flex gap-x-2 items-center " + (index < current ? 'text-gray_r-12' : 'text-gray_r-11')} key={index}>
+            <div className={"leading-none p-2 rounded-full w-7 text-center text-caption-2 " + (index < current ? 'bg-yellow_r-9' : 'bg-gray_r-6')}>
+              { index + 1 }
+            </div>
+            <p className="font-medium text-caption-2">{ label }</p>
+          </div>
+          { index < (labels.length - 1) && (
+            <div className="flex-1 flex items-center">
+              <div className="h-0.5 w-full bg-gray_r-7"></div>
+            </div>
+          ) }
+        </>
+      ))}
+    </div>
+  )
+}
+
+export default ProgressBar;
\ No newline at end of file
-- 
cgit v1.2.3