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