<iman> add feature pengajuan tempo

1 files changed, 60 insertions, 0 deletions

diff --git a/src/lib/pengajuan-tempo/component/PengajuanTempo.jsx b/src/lib/pengajuan-tempo/component/PengajuanTempo.jsx
new file mode 100644
index 00000000..d7b45fda
--- /dev/null
+++ b/src/lib/pengajuan-tempo/component/PengajuanTempo.jsx
@@ -0,0 +1,60 @@
+import React from 'react';
+import Stepper from './Stepper';
+
+const PengajuanTempo = () => {
+  const [currentStep, setCurrentStep] = React.useState(0);
+  const NUMBER_OF_STEPS = 6;
+  const stepDivs = [
+    <div>Informasi Perusahaan</div>,
+    <div>Kontak Person</div>,
+    <div>Pengiriman</div>,
+    <div>Referensi</div>,
+    <div>Dokumen</div>,
+    <div>Konfirmasi</div>,
+  ];
+
+  const goToNextStep = () =>
+    setCurrentStep((prev) => (prev === NUMBER_OF_STEPS - 1 ? prev : prev + 1));
+
+  const goToPreviousStep = () =>
+    setCurrentStep((prev) => (prev <= 0 ? prev : prev - 1));
+
+  return (
+    <>
+      <div className='container flex flex-col items-center '>
+        <h1 className='text-h-sm md:text-title-sm font-semibold text-center mb-6'>
+          Form Pengajuan Tempo
+        </h1>
+        <p className='text-center mb-4'>
+          Lorem ipsum dolor sit amet consectetur. Commodo suspendisse at enim
+          magnis ut quisque rhoncus. Felis volutpat fringilla sollicitudin
+          ultricies. Enim non eget in lorem netus. Nisl pharetra accumsan diam
+          suspendisse.
+        </p>
+      </div>
+      <div className='h-[2px] w-full mb-20 bg-gray_r-3' />
+      <div className='container mt-10 flex flex-col items-center '>
+        <Stepper currentStep={currentStep} numberOfSteps={NUMBER_OF_STEPS} />
+        <div>{stepDivs[currentStep]}</div>
+        <section className='flex gap-10 mt-10'>
+          <button
+            onClick={goToPreviousStep}
+            className='bg-blue-600 text-white p-2 rounded-md'
+            disabled={currentStep === 0} // Disable if on the first step
+          >
+            Previous step
+          </button>
+          <button
+            onClick={goToNextStep}
+            className='bg-blue-600 text-white p-2 rounded-md'
+            disabled={currentStep === NUMBER_OF_STEPS - 1} // Disable if on the last step
+          >
+            Next step
+          </button>
+        </section>
+      </div>
+    </>
+  );
+};
+
+export default PengajuanTempo;