Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 | 75x 75x 75x 75x 225x 225x 225x 225x 300x 6x 75x 150x 75x 150x | import { Columns3, FileUp, LineChart, X } from "lucide-react";
import { Button } from "@/ahuora-design-system/ui/button";
import { DialogClose } from "@/ahuora-design-system/ui/dialog";
import { Separator } from "@/ahuora-design-system/ui/separator";
import { cn } from "@/lib/utils";
export default function ProgressBar({
activeStep,
completedSteps,
onChangeActiveStep,
}: {
activeStep: number;
completedSteps: number[];
onChangeActiveStep: (step: number) => void;
}) {
const options = ["CSV Upload", "Column Mapping", "Charts & Metrics"];
const icons = [FileUp, Columns3, LineChart];
return (
<div className="w-full flex flex-col gap-4">
<div className="flex justify-between items-center">
<div className="flex w-full gap-3 ">
{Object.entries(options).map(([key, option]) => {
const Icon = icons[+key];
const canOpen = completedSteps?.includes(+key);
const currentStep = completedSteps[completedSteps?.length - 1] + 1;
return (
<h1
key={key}
className={cn(
+key === activeStep
? "text-primary cursor-pointer bg-primary/10"
: canOpen || +key === currentStep
? "text-white cursor-pointer"
: "text-faint cursor-not-allowed",
"transition-all duration-300 ease-in-out p-3 rounded-lg",
)}
onClick={() =>
canOpen || +key === currentStep
? onChangeActiveStep(+key)
: undefined
}
>
<div className="flex items-center align-center gap-1 text-sm font-medium">
{Icon && <Icon className="icon-ls mr-2" />} {option}
</div>
</h1>
);
})}
</div>
<DialogClose asChild>
<Button
variant="ghost"
className="h-max p-0"
aria-label="close-ml-viewer"
>
<X className="icon-medium" />
</Button>
</DialogClose>
</div>
<Separator />
</div>
);
}
|