Merge pull request #25 from apsinghdev/Feat/add-stroke-functionality

connect strokeWidth UI with functionality

Author: apsinghdev

client/src/App.jsx

@@ -125,6 +125,7 @@ function App() {
   return (
     <div id="container">
       <Sidebar
+        addLineWidth={addLineWidth}
         clearOnClick={clearOnClick}
         ref={sidebarRef}
         id="clear"

client/src/components/Sidebar.jsx

@@ -10,7 +10,11 @@ function Sidebar(props){
         ref={props.ref}
       >
         <Header toggleMenu={props.toggleMenu}></Header>
-        <Toolbar clearOnClick={props.clearOnClick} id={props.id}></Toolbar>
+        <Toolbar
+          clearOnClick={props.clearOnClick}
+          id={props.id}
+          addLineWidth={props.addLineWidth}
+        ></Toolbar>
         <LoginAndLogout></LoginAndLogout>
       </div>
     );

client/src/components/StrokeWidthPicker.jsx

@@ -1,17 +1,20 @@
-function StrokeWidthPicker(){
-    return (
-      <div className="flex p-1 items-center justify-around mt-4">
-        <h1 className="font-sans text-lg antialiased font-semibold text-white">
-          Stroke :
-        </h1>
-        <input
-          type="number"
-          placeholder="2"
-          defaultValue={2}
-          className="w-12 p-1 h-8 block border border-gray-800 cursor-pointer rounded-md"
-        ></input>
-      </div>
-    );
+/* eslint-disable react/prop-types */
+function StrokeWidthPicker(props){
+  return (
+    <div className="flex p-1 items-center justify-around mt-4">
+      <h1 className="font-sans text-lg antialiased font-semibold text-white">
+        Stroke :
+      </h1>
+      <input
+        onChange={props.addLineWidth}
+        id="lineWidth"
+        type="number"
+        placeholder="2"
+        defaultValue={2}
+        className="w-12 p-1 h-8 block border border-gray-800 cursor-pointer rounded-md"
+      ></input>
+    </div>
+  );
 }
 
 export default StrokeWidthPicker;

client/src/components/Toolbar.jsx

@@ -10,7 +10,7 @@ function Toolbar(props){
         <ColorPicker name="Colors :" defaultColor="#000000"></ColorPicker>
         <ColorPicker name="Canvas :" defaultColor="#FFFFFF"></ColorPicker>
         <Eraser></Eraser>
-        <StrokeWidthPicker></StrokeWidthPicker>
+        <StrokeWidthPicker addLineWidth={props.addLineWidth} ></StrokeWidthPicker>
         <ClearBtn clearOnClick={props.clearOnClick} id={props.id}></ClearBtn>
       </div>
     );