added WeekSelector

anwendung/src/components/DateElement.jsx

@@ -17,8 +17,8 @@ export default function DateElement(props){
     const endDateString = `${endDate.getDate()}.${endDate.getMonth()+1}.${endDate.getFullYear()}`;
     return (
         <>
-            <div className="container">
-                <p className="dateElement">{startDateString} - {endDateString}</p>
+            <div className="dateElement round-border">
+                <p>{startDateString} - {endDateString}</p>
             </div>
         </>
     );

anwendung/src/components/WeekSelector.jsx

@@ -0,0 +1,20 @@
+import Button from "@/components/Button";
+import DateElement from "@/components/DateElement";
+import { arrowLeft } from "./Icons"
+import { arrowRight } from "./Icons"
+import { useState } from 'react'
+
+
+
+export default function WeekSelector(){
+    const [weeks, setWeeks] = useState(0)
+    return (
+        <>
+            <div className="weekSelector">
+                <Button icon={arrowLeft} onClick={() => setWeeks(weeks-1)} />
+                <DateElement week={weeks}/>
+                <Button icon={arrowRight} onClick={() => setWeeks(weeks+1)}/>
+            </div>
+        </>
+    )
+}

anwendung/src/pages/index.js

@@ -3,6 +3,7 @@ import React, {useState} from "react";
 import StatusBar from "@/components/StatusBar";
 import Button from "@/components/Button";
 import {arrowLeft, arrowRight} from "@/components/Icons";
+import WeekSelector from "@/components/WeekSelector";
 
 const inter = Inter({subsets: ['latin']})
 
@@ -11,22 +12,6 @@ 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>
+        <WeekSelector />
     )
 }

anwendung/src/styles/globals.css

@@ -124,3 +124,18 @@ Step Progress Bar
   background-color: #5d606e;
   z-index: -1;
 }
+
+.dateElement{
+  display: flex;
+  margin-left: 20px;
+  margin-right: 20px;
+  height: 50px;
+  width: 200px;
+  align-items: center;
+  justify-content: center;
+  background-color: #0d52ce;
+}
+
+.weekSelector{
+  display: flex;
+}