diff options
Diffstat (limited to 'src/lib')
4 files changed, 111 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; 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; diff --git a/src/lib/pengajuan-tempo/component/informasiPerusahaan.tsx b/src/lib/pengajuan-tempo/component/informasiPerusahaan.tsx new file mode 100644 index 00000000..e69de29b --- /dev/null +++ b/src/lib/pengajuan-tempo/component/informasiPerusahaan.tsx diff --git a/src/lib/pengajuan-tempo/stores/useTempoStore.ts b/src/lib/pengajuan-tempo/stores/useTempoStore.ts new file mode 100644 index 00000000..e69de29b --- /dev/null +++ b/src/lib/pengajuan-tempo/stores/useTempoStore.ts |