Merge pull request #17 from apsinghdev/Feat/add-sidebar-canvas-components

Feat/add sidebar canvas components

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

@@ -8,6 +8,8 @@ import Header from "./components/Header";
 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);
@@ -117,23 +119,13 @@ function App() {
   }
 
   return (
-    <div id="container" style={{ display: "flex" }}>
-      <div
-        id="sidebar"
-        className="flex flex-col w-64 bg-zinc-800 relative"
+    <div id="container">
+      <Sidebar
+        clearOnClick={clearOnClick}
         ref={sidebarRef}
-      >
-        <Header></Header>
-        <Toolbar></Toolbar>
-        <Socials></Socials>
-        <button id="clear" onClick={clearOnClick}>
-          Clear
-        </button>
-        <LoginAndLogout></LoginAndLogout>
-      </div>
-      <div className="canvas-container">
-        <canvas className="canvas" ref={canvasRef}></canvas>
-      </div>
+        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;

client/src/components/ClearBtn.jsx

@@ -1,9 +1,12 @@
-function ClearBtn(){
+/* eslint-disable react/prop-types */
+function ClearBtn(props){
     return (
       <div className="border block flex items-center justify-center mt-5">
         <button
           type="button"
           className="text-white bg-gradient-to-r from-red-400 via-red-500 to-red-600 hover:bg-gradient-to-br font-medium rounded-lg text-sm px-5 py-2.5 text-center"
+          onClick={props.clearOnClick}
+          id={props.id}
         >
           Clear
         </button>

client/src/components/Sidebar.jsx

@@ -0,0 +1,16 @@
+/* eslint-disable react/prop-types */
+import Header from "./Header";
+import Toolbar from "./Toolbar";
+import LoginAndLogout from "./LoginAndLogout";
+
+function Sidebar(props){
+    return (
+      <div className="flex flex-col w-64 bg-zinc-800 relative" ref={props.ref}>
+        <Header></Header>
+        <Toolbar clearOnClick={props.clearOnClick} id={props.id}></Toolbar>
+        <LoginAndLogout></LoginAndLogout>
+      </div>
+    );
+}
+
+export default Sidebar;

client/src/components/Toolbar.jsx

@@ -1,14 +1,15 @@
+/* eslint-disable react/prop-types */
 import ColorPicker from "./ColorPicker";
 import StrokeWidthPicker from "./StrokeWidthPicker";
 import ClearBtn from "./ClearBtn";
 
-function Toolbar(){
+function Toolbar(props){
     return (
       <div className="block w-full mt-20 border align-center">
         <ColorPicker name="Colors :" defaultColor="#000000"></ColorPicker>
         <ColorPicker name="Canvas :" defaultColor="#FFFFFF"></ColorPicker>
         <StrokeWidthPicker></StrokeWidthPicker>
-        <ClearBtn></ClearBtn>
+        <ClearBtn clearOnClick={props.clearOnClick} id={props.id}></ClearBtn>
       </div>
     );
 }