All files / src/pages/flowsheet-page/flowsheet/PropertiesSidebar/MachineLearning ProgressBar.tsx

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
 
 
 
 
 
 
 
 
9x
9x
 
 
 
 
36x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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";
import { X } from "lucide-react";
import React from "react";
 
export default function ProgressBar({ progress }: { progress: number }) {
  const options = ["Upload csv", "Column mapping", "Train model", "Success"];
  return (
    <div className="w-full flex flex-col gap-4">
      <div className="flex justify-between items-center">
        <div className="flex w-full gap-7">
          {options.map((option, index) => (
            <h1
              key={option}
              className={cn(
                index !== progress && "text-faint",
                "cursor-not-allowed",
              )}
            >
              {index + 1}. {option}
            </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>
  );
}