From dc4f8e88a9df05584b304810900402dc01d039be Mon Sep 17 00:00:00 2001
From: GHOSCHT <31184695+GHOSCHT@users.noreply.github.com>
Date: Thu, 28 Oct 2021 09:49:37 +0200
Subject: [PATCH] First visual addition of missing knobs

---
 Dashboard/src/App.tsx                    |  2 ++
 Dashboard/src/Components/KnobSection.tsx | 42 ++++++++++++++++++++++++
 2 files changed, 44 insertions(+)
 create mode 100644 Dashboard/src/Components/KnobSection.tsx

diff --git a/Dashboard/src/App.tsx b/Dashboard/src/App.tsx
index 61908e3..6e512b2 100644
--- a/Dashboard/src/App.tsx
+++ b/Dashboard/src/App.tsx
@@ -7,6 +7,7 @@ import SerialPort from "serialport";
 import Knob from "./Components/Knob";
 import { connect, disconnect } from "./redux/actions/asyncSerialConnectionActions";
 import { setSerialPort } from "./redux/actions/serialConnectionActions";
+import KnobSection from "./Components/KnobSection";
 
 const GlobalStyle = createGlobalStyle`
   html {
@@ -86,6 +87,7 @@ const App = () => {
         toggle={sendToggleHandler}
         status={Math.floor((status / 255) * 100)}
       />
+      <KnobSection />
       <button
         type="button"
         onClick={() => {
diff --git a/Dashboard/src/Components/KnobSection.tsx b/Dashboard/src/Components/KnobSection.tsx
new file mode 100644
index 0000000..5d8763b
--- /dev/null
+++ b/Dashboard/src/Components/KnobSection.tsx
@@ -0,0 +1,42 @@
+import React from "react";
+import styled from "styled-components";
+import Knob from "./Knob";
+
+const KnobSection = () => {
+  const KnobContainer = styled.div`
+  display: flex;
+  `;
+
+  return (
+    <KnobContainer>
+      <Knob
+        increase={() => {}}
+        decrease={() => {}}
+        toggle={() => {}}
+        status={255}
+      />
+      <Knob
+        increase={() => {}}
+        decrease={() => {}}
+        toggle={() => {}}
+        status={255}
+      />
+      <Knob
+        increase={() => {}}
+        decrease={() => {}}
+        toggle={() => {}}
+        status={255}
+      />
+      <Knob
+        increase={() => {}}
+        decrease={() => {}}
+        toggle={() => {}}
+        status={255}
+      />
+
+    </KnobContainer>
+
+  );
+};
+
+export default KnobSection;