<iman> add feature pengajuan tempo

1 files changed, 51 insertions, 0 deletions

diff --git a/src/lib/pengajuan-tempo/component/Stepper.jsx b/src/lib/pengajuan-tempo/component/Stepper.jsx
new file mode 100644
index 00000000..248eeffd
--- /dev/null
+++ b/src/lib/pengajuan-tempo/component/Stepper.jsx
@@ -0,0 +1,51 @@
+import React from 'react';
+
+const Stepper = ({ currentStep, numberOfSteps }) => {
+  const stepLabels = [
+    'Informasi Perusahaan',
+    'Kontak Person',
+    'Pengiriman',
+    'Referensi',
+    'Dokumen',
+    'Konfirmasi',
+  ];
+  console.log('currentStep', currentStep);
+  const activeColor = (index) =>
+    currentStep >= index ? 'bg-red-500' : 'bg-gray-300';
+  const activeColorBullet = (index) =>
+    currentStep >= index ? 'bg-red-500 ' : 'bg-white border-gray-300 border';
+  const isFinalStep = (index) => index === numberOfSteps - 1;
+  const isFirstStep = (index) => index === 0;
+  return (
+    <div className='flex items-center'>
+      {Array.from({ length: numberOfSteps }).map((_, index) => (
+        <React.Fragment key={index}>
+          {isFirstStep(index) ? null : (
+            <div className={`w-48 h-[0.8px] ${activeColor(index)}`}></div>
+          )}
+          <div
+            className={`w-6 h-6 ${
+              currentStep == index
+                ? 'border-red-500 border'
+                : `${activeColorBullet(index)} `
+            }  rounded-full flex justify-center items-center`}
+          >
+            <div className='relative text-xs'>
+              <div className='absolute z-10 -top-14  w-48 h-full  -left-24'>
+                <div
+                  className={`relative w-full max-w-md p-2 text-center ${
+                    currentStep == index ? 'text-red-500' : ''
+                  }  text-nowrap`}
+                >
+                  {stepLabels[index]}
+                </div>
+              </div>
+            </div>
+          </div>
+        </React.Fragment>
+      ))}
+    </div>
+  );
+};
+
+export default Stepper;