admin/hspguard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: stepper improvements

Browse Source
This commit is contained in:
Amir Adal
2025-06-07 01:33:40 +02:00
parent 644cf2a358
commit ab3c2d1eb0
1 changed files with 38 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
web/src/components/ui/stepper.tsx
View File

@ -27,14 +27,13 @@ export const Stepper: React.FC<StepperProps> = ({ steps, currentStep }) => {
return ( return (
<div className="flex flex-col sm:flex-row sm:items-center w-full max-w-2xl mx-auto mb-5 sm:mb-8 gap-5 relative"> <div className="flex flex-col sm:flex-row sm:items-center w-full max-w-2xl mx-auto mb-5 sm:mb-8 gap-5 relative">
{steps.map((step, idx) => ( {steps.map((step, idx) => (
<> <div
key={idx}
className={`sm:flex p-4 pb-0 sm:p-0 flex-1 items-center ${idx < stepIndex ? "opacity-70" : ""} ${idx === stepIndex ? "flex" : "hidden"}`}
>
{/* Step circle */}
<div <div
key={idx} className={`relative z-10 flex items-center justify-center w-12 h-12 min-w-12 sm:w-10 sm:h-10 sm:min-w-10 rounded-full
className={`sm:flex p-4 pb-0 sm:p-0 flex-1 items-center ${idx < stepIndex ? "opacity-70" : ""} ${idx === stepIndex ? "flex" : "hidden"}`}
>
{/* Step circle */}
<div
className={`relative z-10 flex items-center justify-center w-12 h-12 min-w-12 sm:w-10 sm:h-10 sm:min-w-10 rounded-full
${ ${
idx < stepIndex idx < stepIndex
? "bg-blue-400 text-white" ? "bg-blue-400 text-white"
@ -43,44 +42,43 @@ export const Stepper: React.FC<StepperProps> = ({ steps, currentStep }) => {
: "bg-gray-100 dark:bg-gray-800/60 text-gray-500" : "bg-gray-100 dark:bg-gray-800/60 text-gray-500"
} }
`} `}
> >
{idx < stepIndex ? ( {idx < stepIndex ? (
// Check icon for completed steps // Check icon for completed steps
<svg <svg
className="w-5 h-5" className="w-5 h-5"
fill="none" fill="none"
stroke="currentColor" stroke="currentColor"
strokeWidth={3} strokeWidth={3}
viewBox="0 0 24 24" viewBox="0 0 24 24"
> >
<path <path
strokeLinecap="round" strokeLinecap="round"
strokeLinejoin="round" strokeLinejoin="round"
d="M5 13l4 4L19 7" d="M5 13l4 4L19 7"
/> />
</svg> </svg>
) : ( ) : (
(step.icon ?? <span className="font-bold">{idx + 1}</span>) (step.icon ?? <span className="font-bold">{idx + 1}</span>)
)} )}
</div> </div>
{/* Step label */} {/* Step label */}
<div className="flex flex-col ml-2 mr-2 sm:ml-4 sm:mr-4"> <div className="flex flex-col ml-2 mr-2 sm:ml-4 sm:mr-4">
<span className="text-base text-gray-700 dark:text-gray-200 sm:text-sm font-medium"> <span className="text-base text-gray-700 dark:text-gray-200 sm:text-sm font-medium">
{step.label} {step.label}
</span>
{step.description && (
<span className="text-sm sm:text-xs text-gray-500 dark:text-gray-400">
{step.description}
</span> </span>
{step.description && ( )}
<span className="text-sm sm:text-xs text-gray-500 dark:text-gray-400"> </div>
{step.description}
</span>
)}
</div>
{/* {idx < steps.length - 1 && ( {/* {idx < steps.length - 1 && (
<div className="flex-1 h-1 mx-2 min-w sm:mx-4 rounded bg-gray-300 dark:bg-gray-600" /> <div className="flex-1 h-1 mx-2 min-w sm:mx-4 rounded bg-gray-300 dark:bg-gray-600" />
)} */} )} */}
</div> </div>
</>
))} ))}
<div className="sm:hidden relative h-1 w-full bg-gray-200 dark:bg-gray-700 overflow-hidden"> <div className="sm:hidden relative h-1 w-full bg-gray-200 dark:bg-gray-700 overflow-hidden">
<div <div