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 (
<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) => (
<>
<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
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
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={`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
? "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"
}
`}
>
{idx < stepIndex ? (
// Check icon for completed steps
<svg
className="w-5 h-5"
fill="none"
stroke="currentColor"
strokeWidth={3}
viewBox="0 0 24 24"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M5 13l4 4L19 7"
/>
</svg>
) : (
(step.icon ?? <span className="font-bold">{idx + 1}</span>)
)}
</div>
>
{idx < stepIndex ? (
// Check icon for completed steps
<svg
className="w-5 h-5"
fill="none"
stroke="currentColor"
strokeWidth={3}
viewBox="0 0 24 24"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M5 13l4 4L19 7"
/>
</svg>
) : (
(step.icon ?? <span className="font-bold">{idx + 1}</span>)
)}
</div>
{/* Step label */}
<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">
{step.label}
{/* Step label */}
<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">
{step.label}
</span>
{step.description && (
<span className="text-sm sm:text-xs text-gray-500 dark:text-gray-400">
{step.description}
</span>
{step.description && (
<span className="text-sm sm:text-xs text-gray-500 dark:text-gray-400">
{step.description}
</span>
)}
</div>
)}
</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>
</>
</div>
))}
<div className="sm:hidden relative h-1 w-full bg-gray-200 dark:bg-gray-700 overflow-hidden">
<div