64 lines
2.0 KiB
TypeScript
64 lines
2.0 KiB
TypeScript
import React from 'react';
|
|
import { Box } from './primitives/Box';
|
|
import { Text } from './Text';
|
|
import { Check } from 'lucide-react';
|
|
import { Icon } from './Icon';
|
|
|
|
export interface Step {
|
|
id: string;
|
|
label: string;
|
|
}
|
|
|
|
export interface StepIndicatorProps {
|
|
steps: Step[];
|
|
currentStepId: string;
|
|
completedStepIds: string[];
|
|
}
|
|
|
|
export const StepIndicator = ({
|
|
steps,
|
|
currentStepId,
|
|
completedStepIds
|
|
}: StepIndicatorProps) => {
|
|
return (
|
|
<Box display="flex" alignItems="center" gap={4}>
|
|
{steps.map((step, index) => {
|
|
const isCurrent = step.id === currentStepId;
|
|
const isCompleted = completedStepIds.includes(step.id);
|
|
const isLast = index === steps.length - 1;
|
|
|
|
return (
|
|
<React.Fragment key={step.id}>
|
|
<Box display="flex" alignItems="center" gap={2}>
|
|
<Box
|
|
width="2rem"
|
|
height="2rem"
|
|
display="flex"
|
|
alignItems="center"
|
|
justifyContent="center"
|
|
rounded="full"
|
|
bg={isCompleted ? 'var(--ui-color-intent-success)' : isCurrent ? 'var(--ui-color-intent-primary)' : 'var(--ui-color-bg-surface-muted)'}
|
|
style={{ border: isCurrent ? '2px solid var(--ui-color-intent-primary)' : 'none' }}
|
|
>
|
|
{isCompleted ? (
|
|
<Icon icon={Check} size={4} intent="high" />
|
|
) : (
|
|
<Text size="xs" weight="bold" variant={isCurrent ? 'high' : 'low'}>
|
|
{index + 1}
|
|
</Text>
|
|
)}
|
|
</Box>
|
|
<Text size="sm" weight={isCurrent ? 'bold' : 'medium'} variant={isCurrent ? 'high' : 'low'}>
|
|
{step.label}
|
|
</Text>
|
|
</Box>
|
|
{!isLast && (
|
|
<Box flex={1} height="2px" bg="var(--ui-color-border-muted)" minWidth="2rem" />
|
|
)}
|
|
</React.Fragment>
|
|
);
|
|
})}
|
|
</Box>
|
|
);
|
|
};
|