31 lines
1.1 KiB
TypeScript
31 lines
1.1 KiB
TypeScript
import { Check } from 'lucide-react';
|
|
import { UPLOAD_VIEW_STEPS } from './types';
|
|
import type { UploadViewStep } from './types';
|
|
|
|
interface UploadViewStepperProps {
|
|
step: UploadViewStep;
|
|
}
|
|
|
|
export function UploadViewStepper({ step }: UploadViewStepperProps) {
|
|
return (
|
|
<div className="flex items-center justify-between mb-8 px-4">
|
|
{UPLOAD_VIEW_STEPS.map((s, i) => (
|
|
<div key={s.num} className="flex items-center gap-4">
|
|
<div
|
|
className={`w-8 h-8 rounded-full flex items-center justify-center font-bold text-sm transition-all duration-[var(--duration-normal)] ${step >= s.num ? 'bg-primary text-primary-foreground' : 'bg-muted text-muted-foreground'}`}
|
|
>
|
|
{step > s.num ? <Check className="w-5 h-5" /> : s.num}
|
|
</div>
|
|
<span
|
|
className={`${step >= s.num ? 'text-foreground' : 'text-muted-foreground'} font-medium hidden md:block`}
|
|
>
|
|
{s.label}
|
|
</span>
|
|
{i < UPLOAD_VIEW_STEPS.length - 1 && (
|
|
<div className="w-12 h-px bg-border mx-4 hidden md:block opacity-50" />
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|