add sidebar component

Author: apsinghdev

client/src/App.jsx

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

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>
     );
 }