connect penColor UI with functionality

Author: apsinghdev

client/src/App.jsx

@@ -107,7 +107,7 @@ function App() {
   }
 
   function addStroke(e) {
-    if (e.target.id === "stroke") {
+    if (e.target.id === "penColor") {
       const newColor = e.target.value;
       color = newColor;
       ctx.strokeStyle = newColor;
@@ -126,6 +126,7 @@ function App() {
     <div id="container">
       <Sidebar
         addStroke={addStroke}
+
         addLineWidth={addLineWidth}
         clearOnClick={clearOnClick}
         ref={sidebarRef}

client/src/components/PenColor.jsx

@@ -6,7 +6,9 @@ function PenColor(props) {
         {props.name}
       </h1>
       <input
+        id="penColor"
         type="color"
+        onChange={props.addStroke}
         value={props.defaultColor}
         className="p-1 h-10 w-10 block bg-white border border-gray-800 cursor-pointer rounded-lg disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-800 dark:border-neutral-700"
       ></input>

client/src/components/Sidebar.jsx

@@ -14,6 +14,7 @@ function Sidebar(props){
           clearOnClick={props.clearOnClick}
           id={props.id}
           addLineWidth={props.addLineWidth}
+          addStroke={props.addStroke}
         ></Toolbar>
         <LoginAndLogout></LoginAndLogout>
       </div>