blob: c5efa5bcb7b6f2d2af190223d58129829cb077ff (
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 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;
|
