byarielm.fyi
+22
-2
src/components/common/ProgressBar.tsx
+22
-2
src/components/common/ProgressBar.tsx
···
19
19
}) => {
20
20
const percentage = total > 0 ? Math.round((current / total) * 100) : 0;
21
21
22
+
// Wizard variant uses segmented progress (one segment per step)
23
+
if (variant === "wizard") {
24
+
return (
25
+
<div className={`flex items-center space-x-2 ${className}`}>
26
+
{Array.from({ length: total }, (_, idx) => (
27
+
<div key={idx} className="flex-1">
28
+
<div
29
+
className={`h-2 rounded-full transition-all ${
30
+
idx < current
31
+
? "bg-orange-500"
32
+
: "bg-cyan-500/30 dark:bg-purple-500/30"
33
+
}`}
34
+
/>
35
+
</div>
36
+
))}
37
+
</div>
38
+
);
39
+
}
40
+
41
+
// Default and search variants use percentage-based progress bar
22
42
const containerStyles: Record<ProgressVariant, string> = {
23
43
default: "w-full bg-slate-200 dark:bg-slate-700 rounded-full h-3",
24
44
search: "w-full bg-slate-200 dark:bg-slate-700 rounded-full h-3",
25
-
wizard: "h-2 rounded-full",
45
+
wizard: "", // Not used in this path
26
46
};
27
47
28
48
const barStyles: Record<ProgressVariant, string> = {
···
30
50
"bg-firefly-banner dark:bg-firefly-banner-dark h-full rounded-full transition-all",
31
51
search:
32
52
"bg-firefly-banner dark:bg-firefly-banner-dark h-full rounded-full transition-all",
33
-
wizard: "bg-orange-500 h-full rounded-full transition-all",
53
+
wizard: "", // Not used in this path
34
54
};
35
55
36
56
return (