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.
77 lines
2.1 KiB
77 lines
2.1 KiB
import React from 'react';
|
|
|
|
interface CurrentStep {
|
|
stepNumber: number;
|
|
description: string;
|
|
active?: boolean;
|
|
completed?: boolean;
|
|
isLastStep?: boolean;
|
|
}
|
|
|
|
const SetupSteps: React.FC<CurrentStep> = ({
|
|
stepNumber,
|
|
description,
|
|
active = false,
|
|
completed = false,
|
|
isLastStep = false,
|
|
}) => {
|
|
return (
|
|
<li className="relative md:flex-1 md:flex">
|
|
<div className="px-6 py-4 flex items-center text-sm leading-5 font-medium space-x-4">
|
|
<div
|
|
className={`flex-shrink-0 w-10 h-10 flex items-center justify-center border-2
|
|
${active ? 'border-indigo-600 ' : 'border-white '}
|
|
${completed ? 'bg-indigo-600 border-indigo-600 ' : ''} rounded-full`}
|
|
>
|
|
{completed && (
|
|
<svg
|
|
className="w-6 h-6 text-white"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 20 20"
|
|
fill="currentColor"
|
|
>
|
|
<path
|
|
fill="evenodd"
|
|
d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
|
|
clip="evenodd"
|
|
/>
|
|
</svg>
|
|
)}
|
|
{!completed && (
|
|
<p className={active ? 'text-white' : 'text-indigo-200'}>
|
|
{stepNumber}
|
|
</p>
|
|
)}
|
|
</div>
|
|
<p
|
|
className={`text-sm leading-5 font-medium ${
|
|
active ? 'text-white' : 'text-indigo-200'
|
|
}`}
|
|
>
|
|
{description}
|
|
</p>
|
|
</div>
|
|
|
|
{!isLastStep && (
|
|
<div className="hidden md:block absolute top-0 right-0 h-full w-5">
|
|
<svg
|
|
className="h-full w-full text-gray-600"
|
|
viewBox="0 0 22 80"
|
|
fill="none"
|
|
preserveAspectRatio="none"
|
|
>
|
|
<path
|
|
d="M0 -2L20 40L0 82"
|
|
vectorEffect="non-scaling-stroke"
|
|
stroke="currentcolor"
|
|
strokeLinejoin="round"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
)}
|
|
</li>
|
|
);
|
|
};
|
|
|
|
export default SetupSteps;
|