complete UI of drawing board

Author: apsinghdev

client/src/App.css

@@ -0,0 +1,83 @@
+
+#root {
+    max-width: 1280px;
+    margin: 0 auto;
+    padding: 2rem;
+    height: 70vh;
+    width: 100vh;
+    /* text-align: center; */
+  }
+
+#sidebar * {
+    margin-bottom: 6px;
+  }
+  
+  #sidebar h1 {
+    margin-top: '20px';
+    background: #7F7FD5;
+    background: -webkit-linear-gradient(to right, #91EAE4, #86A8E7, #7F7FD5);
+    background: linear-gradient(to right, #91EAE4, #86A8E7, #7F7FD5);
+    background-clip: text;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+  }
+  
+  #linewidth{
+    margin-top: 10px !important; 
+  }
+
+ #container{
+    height: 100%;
+    display: flex;
+    width: 100%;
+ }
+
+ #sidebar{
+    display: flex;
+    flex-direction: column;
+    padding: 5px;
+    width: 250px;
+    background-color: #202020;
+    padding-left: 15px;
+ }
+  .input-container {
+    display: block;
+    margin-top: 40px;
+  }
+  
+  .input-container label {
+    display: block;
+    color: white;
+  }
+  
+  .input-container input {
+    display: block;
+    width: 60%;
+  }
+  
+  #clear {
+    display: block;
+    width: 60%;
+    margin-top: 20px;
+  }
+  
+  .canvas-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+    width: 100%;
+  }
+  
+  .canvas {
+    height: 100%;
+    width: 100%;
+    border: 0px solid black;
+    box-shadow: 0 0 4px #000;
+  }
+
+  /* #colorpicker{
+    margin-top: '40px';
+  } */
+
+  

client/src/App.jsx

@@ -1,4 +1,5 @@
 import { useEffect, useRef } from "react";
+import './App.css'
 
 function App() {
   const canvasRef = useRef(null);
@@ -20,19 +21,18 @@ function App() {
     }
 
     function handleMouseover(e) {
-      if(isDrawing){
-        const endX = e.clientX-canvas.getBoundingClientRect().left;
-        const endY = e.clientY-canvas.getBoundingClientRect().top;
-        drawLine(startX, startY, endX, endY);
-        startX = endX;
-        startY = endY;
-      }
+      if (!isDrawing) return;
+      const endX = e.clientX - canvas.getBoundingClientRect().left;
+      const endY = e.clientY - canvas.getBoundingClientRect().top;
+      drawLine(startX, startY, endX, endY);
+      startX = endX;
+      startY = endY;
     }
 
     function handleMousedown(e) {
       isDrawing = true;
-      startX = e.clientX-canvas.getBoundingClientRect().left;
-      startY = e.clientY-canvas.getBoundingClientRect().top;
+      startX = e.clientX - canvas.getBoundingClientRect().left;
+      startY = e.clientY - canvas.getBoundingClientRect().top;
     }
     function handleMouseup(e) {
       isDrawing = false;
@@ -50,25 +50,24 @@ function App() {
   }, []);
 
   return (
-    <div
-      style={{
-        display: "flex",
-        justifyContent: "center",
-        alignItems: "center",
-        height: "700px",
-        width: "100%",
-      }}
-    >
-      <canvas
-        style={{
-          height: "70vh",
-          width: "70vh",
-          border: "0px solid black",
-          boxShadow: "0 0 4px #000",
-        }}
-        ref={canvasRef}
-      ></canvas>
+    <div id="container" style={{ display: 'flex' }}>
+  <div id="sidebar">
+    <h1 id="drawRTC">drawRTC</h1>
+    <div className="input-container" id='colorpicker'>
+      <label htmlFor="stroke">Stroke</label>
+      <input id="stroke" name="stroke" type="color" />
     </div>
+    <div className="input-container" id='linewidth'>
+      <label htmlFor="lineWidth">Line Width</label>
+      <input id="lineWidth" name="lineWidth" type="number" value="5" />
+    </div>
+    <button id="clear">Clear</button>
+  </div>
+  <div className="canvas-container">
+    <canvas className="canvas" ref={canvasRef}></canvas>
+  </div>
+</div>
+
   );
 }
 

client/src/index.css

@@ -0,0 +1,7 @@
+body {
+    margin: 0;
+    display: flex;
+    place-items: center;
+    min-width: 320px;
+    min-height: 100vh;
+  }