You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
36 lines
956 B
36 lines
956 B
export type StepName =
|
|
| 'left_ready'
|
|
| 'left_begin'
|
|
| 'left_end'
|
|
| 'right_ready'
|
|
| 'right_begin'
|
|
| 'right_end';
|
|
|
|
export type StepState = 'none' | 'ongoing' | 'done';
|
|
|
|
export default function StepItem({ state = 'none', text }: { state: StepState; text: string }) {
|
|
return (
|
|
<div className="flex items-center px-4 h-10 bg-white rounded gap-3">
|
|
<div
|
|
className={`rounded-full w-[14px] h-[14px] flex justify-center items-center ${
|
|
state === 'done'
|
|
? 'bg-[#52C41A]/[0.35]'
|
|
: state === 'ongoing'
|
|
? 'bg-[#187ef9]/[0.35]'
|
|
: 'bg-[#c0c0c0]/[0.35]'
|
|
}`}
|
|
>
|
|
<div
|
|
className={`rounded-full w-[10px] h-[10px] ${
|
|
state === 'done'
|
|
? 'bg-[#52C41A]'
|
|
: state === 'ongoing'
|
|
? 'bg-[#187ef9]'
|
|
: 'bg-[#c0c0c0]'
|
|
}`}
|
|
></div>
|
|
</div>
|
|
<p>{text}</p>
|
|
</div>
|
|
);
|
|
}
|