First visual addition of missing knobs

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={() => {

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;