forked from cardosofelipe/pragma-stack
Felipe Cardoso
c17fdab3d3
- Refactored JSX elements to improve readability by collapsing multi-line props and attributes into single lines if their length permits. - Improved consistency in component imports by grouping and consolidating them. - No functional changes, purely restructuring for clarity and maintainability.
56 lines
1.5 KiB
TypeScript
56 lines
1.5 KiB
TypeScript
'use client';
|
|
|
|
/**
|
|
* Step Indicator Component
|
|
*
|
|
* Shows progress through the wizard steps with visual feedback.
|
|
* Dynamically adjusts based on whether script mode is active.
|
|
*/
|
|
|
|
import { cn } from '@/lib/utils';
|
|
import { getStepLabels, getDisplayStep, getTotalSteps } from './constants';
|
|
|
|
interface StepIndicatorProps {
|
|
currentStep: number;
|
|
isScriptMode: boolean;
|
|
className?: string;
|
|
}
|
|
|
|
export function StepIndicator({ currentStep, isScriptMode, className }: StepIndicatorProps) {
|
|
const steps = getStepLabels(isScriptMode);
|
|
const totalSteps = getTotalSteps(isScriptMode);
|
|
const displayStep = getDisplayStep(currentStep, isScriptMode);
|
|
|
|
return (
|
|
<div className={cn('w-full', className)}>
|
|
<div className="mb-2 flex items-center justify-between text-sm text-muted-foreground">
|
|
<span>
|
|
Step {displayStep} of {totalSteps}
|
|
</span>
|
|
<span>{steps[displayStep - 1]}</span>
|
|
</div>
|
|
<div
|
|
className="flex gap-1"
|
|
role="progressbar"
|
|
aria-valuenow={displayStep}
|
|
aria-valuemax={totalSteps}
|
|
>
|
|
{Array.from({ length: totalSteps }, (_, i) => (
|
|
<div
|
|
key={i}
|
|
className={cn(
|
|
'h-2 flex-1 rounded-full transition-colors',
|
|
i + 1 < displayStep
|
|
? 'bg-primary'
|
|
: i + 1 === displayStep
|
|
? 'bg-primary/70'
|
|
: 'bg-muted'
|
|
)}
|
|
aria-hidden="true"
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|