StatusBar Component

Implemented a basic status bar with 3 dots, that is able to show 3 states. The length of the status line can be controlled by a paramter called "progress". Every value between 0 and 100 is valid. The Progress bar will change its color depending on the value of "progress"

anwendung/src/components/Button.jsx

@@ -21,8 +21,8 @@ export default function Button(p) {
     //if parameters are not set, they are set to default values
     if (height == null) height = 50;
     if (width == null) width = 100;
-    if (iconWidth == null) iconWidth = 50;
-    if (iconHeight == null) iconHeight = 50;
+    if (iconWidth == null) iconWidth = width-10;
+    if (iconHeight == null) iconHeight = height-10;
     if (onClick == null) onClick = () => {};
 
     //build in the icon width and height to the svg tag (svg tag should not contain any size information by default)
@@ -42,6 +42,9 @@ export default function Button(p) {
                     style={{
                         width: width,
                         height: height,
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center"
                     }}
                     onClick={onClick}>
                 {text}

anwendung/src/components/Icons.js

@@ -1,11 +1,7 @@
-export const arrowLeft = `<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-arrow-left" viewBox="0 0 16 16">
+export const arrowLeft = `<svg xmlns="http://www.w3.org/2000/svg" fill="white" class="bi bi-arrow-left" viewBox="0 0 16 16">
   <path fill-rule="evenodd" d="M15 8a.5.5 0 0 0-.5-.5H2.707l3.147-3.146a.5.5 0 1 0-.708-.708l-4 4a.5.5 0 0 0 0 .708l4 4a.5.5 0 0 0 .708-.708L2.707 8.5H14.5A.5.5 0 0 0 15 8z"/>
 </svg>`
 
-export const arrowRight = `<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="bi bi-arrow-right" viewBox="0 0 16 16">
+export const arrowRight = `<svg xmlns="http://www.w3.org/2000/svg" fill="white" class="bi bi-arrow-right" viewBox="0 0 16 16">
   <path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z"/>
 </svg>`
-
-export const test = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-1-circle-fill" viewBox="0 0 16 16">
-  <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0ZM9.283 4.002H7.971L6.072 5.385v1.271l1.834-1.318h.065V12h1.312V4.002Z"/>
-</svg>`;

anwendung/src/components/StatusBar.jsx

@@ -0,0 +1,23 @@
+import React from "react"
+
+export default function StatusBar(p)
+{
+    if(p.progress > 100) p.progress = 100;
+    let classNames = ["not-started", "started", "finished"];
+    let index = p.progress / 50;
+
+    return (
+        <div className={"step-container"}>
+            <div className={"steps"}>
+                <span className={"step " + classNames[index]}></span>
+                <span className={"step " + classNames[index]}></span>
+                <span className={"step " + classNames[index]}></span>
+                <div className={"progress-bar " + classNames[index]}
+                     style={{
+                         width: p.progress + "%"
+                     }}
+                ></div>
+            </div>
+        </div>
+    )
+}