1 files changed, 65 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..c5efa5bc
--- /dev/null
+++ b/src/lib/pengajuan-tempo/component/Stepper.jsx
@@ -0,0 +1,65 @@
+import React from 'react';
+import useDevice from '@/core/hooks/useDevice';
+const Stepper = ({ currentStep, numberOfSteps }) => {
+  const { isDesktop, isMobile } = useDevice();
+  const stepLabels = [
+    'Informasi Perusahaan',
+    'Kontak Person',
+    'Pengiriman',
+    'Referensi',
+    'Dokumen',
+    'Konfirmasi',
+  ];
+  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={`${isMobile ? 'w-12' : 'w-48'} h-[1px] ${activeColor(
+                index
+              )}`}
+            ></div>
+          )}
+          <div
+            className={`w-6 h-6 ${
+              currentStep == index
+                ? 'border-red-500 border'
+                : `${activeColorBullet(index)} `
+            }  rounded-full flex justify-center items-center text-nowrap`}
+          >
+            <div className='relative text-xs'>
+              <div
+                className={`absolute z-10  ${
+                  isMobile
+                    ? `w-12 h-full top-4 ${
+                        isFinalStep(index) ? '-left-16' : '-left-4'
+                      }`
+                    : 'w-48 h-full -top-14 -left-24'
+                }  `}
+              >
+                <div
+                  className={`relative w-full max-w-md p-2 text-center ${
+                    currentStep == index
+                      ? 'text-red-500'
+                      : `${isMobile ? 'hidden' : ''}`
+                  }  text-nowrap`}
+                >
+                  {stepLabels[index]}
+                </div>
+              </div>
+            </div>
+          </div>
+        </React.Fragment>
+      ))}
+    </div>
+  );
+};
+
+export default Stepper;