blob: 5ef5374e8868642a1a41d59fddda80eab2b56b93 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
|
import React from 'react';
import Stepper from './Stepper';
import InformasiPerusahaan from './informasiPerusahaan'; // Make sure this component exists
const PengajuanTempo = () => {
const [currentStep, setCurrentStep] = React.useState(0);
const NUMBER_OF_STEPS = 6;
// Use the component directly in the array
const stepDivs = [
<InformasiPerusahaan />, // Call the component correctly
<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 '>
<div className='flex items-center justify-center'>
<Stepper currentStep={currentStep} numberOfSteps={NUMBER_OF_STEPS} />
</div>
<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;
|
