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>
+    )
+}

anwendung/src/pages/_app.js

@@ -1,4 +1,4 @@
-//import '@/styles/globals.css'
+import '@/styles/globals.css'
 
 export default function App({ Component, pageProps }) {
   return <Component {...pageProps} />

anwendung/src/pages/index.js

@@ -1,10 +1,32 @@
-import { Inter } from 'next/font/google'
+import {Inter} from 'next/font/google'
+import React, {useState} from "react";
+import StatusBar from "@/components/StatusBar";
 import Button from "@/components/Button";
+import {arrowLeft, arrowRight} from "@/components/Icons";
 
-const inter = Inter({ subsets: ['latin'] })
+const inter = Inter({subsets: ['latin']})
 
-export default function Home() {
-  return (
-    <></>
-  )
-}
+export default function Home(p) {
+
+    const [pr, setPr] = useState(0)
+
+    return (
+        <div style={{
+            display: "flex",
+            flexDirection: "row",
+            alignItems: "center",
+            justifyContent: "space-between",
+            gap: 30
+        }}>
+            <Button onClick={() => {
+                setPr(pr - 50)
+            }} width={50} height={50} icon={arrowLeft}/>
+
+            <StatusBar progress={pr}/>
+
+            <Button onClick={() => {
+                setPr(pr + 50)
+            }} width={50} height={50} icon={arrowRight}/>
+        </div>
+    )
+}

anwendung/src/styles/globals.css

@@ -4,7 +4,7 @@
 
 :root {
   --foreground-rgb: 0, 0, 0;
-  --background-start-rgb: 214, 219, 220;
+  --background-start-rgb: 255, 255, 255;
   --background-end-rgb: 255, 255, 255;
 }
 
@@ -24,8 +24,14 @@ body {
       rgb(var(--background-end-rgb))
     )
     rgb(var(--background-start-rgb));
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
+/*
+Button
+ */
 .round-border
 {
   border-radius: 10px;
@@ -56,3 +62,54 @@ body {
 {
   background-color: #585858;
 }
+
+/*
+Step Progress Bar
+ */
+.step-container
+{
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  max-width: 400px;
+}
+
+.steps
+{
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  gap: 20px;
+  width: 100%;
+  position: relative;
+}
+
+.step
+{
+  width: 40px; height: 40px;
+  border-radius: 50%;
+}
+
+.steps .not-started
+{
+  background-color: #e10000;
+}
+
+.steps .started
+{
+  background-color: #ecc700;
+}
+
+.steps .finished
+{
+  background-color: #46be10;
+}
+
+.progress-bar
+{
+  position: absolute;
+  height: 8px;
+  background-color: #5d606e;
+  z-index: -1;
+}