Merge pull request #34 from apsinghdev/Add/canvas-color

connect canvasColor UI with functionality

Author: apsinghdev

client/src/atoms.js

@@ -8,4 +8,9 @@ export const eraserState = atom({
 export const cursorPosition = atom({
     key: "cursor-position",
     default: {x: 0, y: 0}
-})
+})
+
+export const canvasColors = atom({
+  key: "canvasColor",
+  default: "#D2B55B",
+});

client/src/components/Canvas.jsx

@@ -1,11 +1,15 @@
 /* eslint-disable react/prop-types */
 import Menu from "./Menu";
+import { useRecoilValue } from "recoil";
+import { canvasColors } from "../atoms";
 
 function Canvas(props){
+  const canvasColor = useRecoilValue(canvasColors);
     return (
       <div className="flex justify-center items-center h-full w-80vw overflow-hidden">
         <canvas
-          className="h-full w-86vw bg-yellow-600"
+          className="h-full w-86vw"
+          style={{backgroundColor: `${canvasColor}`}}
           ref={props.canvasRef}
         ></canvas>
         {props.showMenu && <Menu></Menu>}

client/src/components/CanvasColor.jsx

@@ -1,13 +1,25 @@
 /* eslint-disable react/prop-types */
+import { useRecoilState } from "recoil";
+import { canvasColors } from "../atoms";
+
+
 function CanvasColor(props) {
+
+  const [canvasColor, setCanvasColor] = useRecoilState(canvasColors);
+
+  function changeHandler(e){
+    setCanvasColor(e.target.value);
+  }
+
   return (
     <div className="flex p-1 items-center justify-around mt-3">
       <h1 className="font-sans text-lg antialiased font-semibold text-white">
         {props.name}
       </h1>
       <input
         type="color"
-        value={props.defaultColor}
+        value={canvasColor}
+        onChange={changeHandler}
         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>
     </div>