blob: e9b49e12ff2991dbb5a46221fb739ef3089842c5 (
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
|
import React from 'react';
const Stepper = ({ currentStep, numberOfSteps }) => {
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={`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;
|
