Status Bar Active Element Highlighted

This commit is contained in:
brausjonas
2023-05-02 23:08:41 +02:00
parent 05e3916952
commit d9dd4c6cb9
2 changed files with 12 additions and 3 deletions
+6 -3
View File
@@ -6,12 +6,15 @@ export default function StatusBar(p)
let classNames = ["not-started", "started", "finished"];
let index = p.progress / 50;
let actives = ["", "", ""]
actives[index] = "active";
return (
<div className={"step-container"}>
<div className={"steps"}>
<span className={"step " + classNames[index]}>1</span>
<span className={"step " + classNames[index]}>2</span>
<span className={"step " + classNames[index]}>3</span>
<span className={"step " + classNames[index] + " " + actives[0]}>1</span>
<span className={"step " + classNames[index] + " " + actives[1]}>2</span>
<span className={"step " + classNames[index] + " " + actives[2]}>3</span>
<div className={"progress-bar " + classNames[index]}
style={{
width: p.progress + "%"