add canvas component

Author: apsinghdev

client/src/App.css

@@ -55,20 +55,6 @@
     width: 60%;
     margin-top: 20px;
   }
-  
-  .canvas-container {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 100%;
-    width: 100%;
-  }
-  
-  .canvas {
-    height: 100%;
-    width: 86vw;
-    background-color: rgb(212, 212, 13);
-  }
 
 
 

client/src/App.jsx

@@ -9,6 +9,7 @@ import Toolbar from "./components/Toolbar";
 import Socials from "./components/Socials";
 import LoginAndLogout from "./components/LoginAndLogout";
 import Sidebar from "./components/Sidebar";
+import Canvas from "./components/Canvas";
 
 function App() {
   const canvasRef = useRef(null);
@@ -119,10 +120,12 @@ function App() {
 
   return (
     <div id="container" style={{ display: "flex" }}>
-      <Sidebar clearOnClick={clearOnClick} ref={sidebarRef} id="clear"></Sidebar>
-      <div className="canvas-container">
-        <canvas className="canvas" ref={canvasRef}></canvas>
-      </div>
+      <Sidebar
+        clearOnClick={clearOnClick}
+        ref={sidebarRef}
+        id="clear"
+      ></Sidebar>
+      <Canvas canvasRef={canvasRef}></Canvas>
     </div>
   );
 }

client/src/components/Canvas.jsx

@@ -0,0 +1,13 @@
+/* eslint-disable react/prop-types */
+function Canvas(props){
+    return (
+      <div className="flex justify-center items-center h-full w-80vw overflow-hidden">
+        <canvas
+          className="h-full w-86vw bg-yellow-600"
+          ref={props.canvasRef}
+        ></canvas>
+      </div>
+    );
+}
+
+export default Canvas;