52 lines
1.9 KiB
TypeScript
52 lines
1.9 KiB
TypeScript
import { Check } from "lucide-react";
|
|
import { faNum } from "../../lib/formatters";
|
|
import { cn } from "../../lib/utils";
|
|
|
|
export interface StepperProps {
|
|
current: number;
|
|
highestVisited: number;
|
|
completedSteps: Set<number>;
|
|
onGoto: (step: number) => void;
|
|
}
|
|
|
|
const STEPS = ["تأمینکننده", "اقلام", "شرایط پرداخت", "پروژه", "بازبینی و ثبت"];
|
|
|
|
// نوار ۵ مرحلهای ویزارد — کلیک روی مراحل بازدیدشده مجاز است
|
|
// مراحل تکمیلشده سبز، مرحلهی فعلی آبی
|
|
export function Stepper({ current, completedSteps, onGoto }: StepperProps) {
|
|
return (
|
|
<div className="mb-4 flex flex-wrap gap-2 rounded-xl border border-line bg-panel p-2 shadow-sm">
|
|
{STEPS.map((label, i) => {
|
|
const step = i + 1;
|
|
const isCurrent = step === current;
|
|
const isComplete = completedSteps.has(step);
|
|
return (
|
|
<button
|
|
key={step}
|
|
type="button"
|
|
className={cn(
|
|
"flex flex-1 cursor-pointer items-center justify-center gap-2 rounded-lg px-3 py-2 text-[12.5px] transition-colors",
|
|
isCurrent
|
|
? "bg-[#2563eb] font-bold text-white"
|
|
: isComplete
|
|
? "bg-green-bg font-medium text-green"
|
|
: "hover:bg-slate-bg",
|
|
)}
|
|
onClick={() => onGoto(step)}
|
|
>
|
|
<span
|
|
className={cn(
|
|
"flex h-5 w-5 items-center justify-center rounded-full text-[11px] font-bold",
|
|
isCurrent ? "bg-white/25" : isComplete ? "bg-green-bg text-green" : "bg-slate-bg text-muted",
|
|
)}
|
|
>
|
|
{isComplete ? <Check className="h-3 w-3" /> : faNum(step)}
|
|
</span>
|
|
{label}
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
}
|