add toolbar and its components on left

modules/room/components/Room.tsx

@@ -9,7 +9,7 @@ import RoomContextProvider from "../context/Room.context";
 import Canvas from "./Canvas";
 import { MousePosition } from "./MousePosition";
 import MouseRenderer from "./MouseRenderer";
-import { ToolBar } from "./ToolBar";
+import { ToolBar } from "./toolbar/ToolBar";
 
 
 

modules/room/components/toolbar/ColorPicker.tsx

@@ -0,0 +1,48 @@
+import { useOptions, useSetOptions } from "@/common/recoil/options";
+import { AnimatePresence, motion } from "framer-motion";
+import { useRef, useState } from "react";
+import { useClickAway } from "react-use";
+import { HexColorPicker } from "react-colorful";
+import { ColorPickerAnimations } from "../../animations/ColorPicker.animations";
+
+const ColorPicker = () => {
+    //may cause error
+  const options = useOptions(); 
+  const setOptions = useSetOptions();
+
+  const ref = useRef<HTMLDivElement>(null);
+  const [opened, setOpened] = useState(false);
+
+  useClickAway(ref, () => setOpened(false));
+
+  return (
+    <div className="relative flex items-center" ref={ref}>
+      <button
+        className="h-6 w-6 rounded-full border-2 border-white transition-all hover:scale-125 active:scale-100"
+        style={{ backgroundColor: options.lineColor }}
+        onClick={() => setOpened(!opened)}
+      >
+        <AnimatePresence>
+          {opened && (
+            <motion.div
+              className="absolute top-0 left-14"
+              variants={ColorPickerAnimations}
+              initial="from"
+              animate="to"
+              exit="from"
+            >
+              <HexColorPicker
+                color={options.lineColor}
+                onChange={(e) =>
+                  setOptions((prev) => ({ ...prev, lineColor: e }))
+                }
+              />
+            </motion.div>
+          )}
+        </AnimatePresence>
+      </button>
+    </div>
+  );
+};
+
+export default ColorPicker;

modules/room/components/toolbar/LineWidthPicker.tsx

@@ -0,0 +1,51 @@
+import { useOptions, useSetOptions } from "@/common/recoil/options";
+import { AnimatePresence, motion } from "framer-motion";
+import {useRef, useState} from "react";
+import { BsBorderWidth } from "react-icons/bs";
+import { useClickAway } from "react-use";
+
+const LineWidthPicker = () => {
+      //may cause error
+  const options = useOptions(); 
+  const setOptions = useSetOptions();
+
+    const ref= useRef<HTMLDivElement>(null);
+    const [opened, setOpened] = useState(false);
+    useClickAway(ref, () => setOpened(false));
+
+
+        return (
+            <div className="relative flex items-center" ref={ref}>
+                <button className="text-xl" onClick={() => setOpened(!opened)}>
+                    <BsBorderWidth />
+                </button>
+                <AnimatePresence>
+                    {opened && (
+                        <motion.div
+                            className="absolute top-[6px] left-14 w-36"
+                            initial="from"
+                            animate="to"
+                            exit="from"
+                        >
+                            <input
+                                type="range"
+                                min={1}
+                                max={20}
+                                value={options.lineWidth}
+                                //may cause error
+                                onChange={(e) => {
+                                    setOptions((prev: CtxOptions) => ({
+                                        ...prev,
+                                        lineWidth: parseInt(e.target.value, 10)
+                                    }));
+                                }}
+                                className="h-4 w-full cursor-pointer appearance-none rounded-lg bg-gray-200"
+                            />
+                        </motion.div>
+                    )}
+                </AnimatePresence>
+            </div>
+        );
+    };
+
+    export default LineWidthPicker;

modules/room/components/toolbar/ToolBar.tsx

@@ -0,0 +1,29 @@
+import ColorPicker from "./ColorPicker";
+import LineWidthPicker from "./LineWidthPicker";
+import { BsFillChatFill, BsFillImageFill, BsThreeDots } from "react-icons/bs";
+import { HiOutlineDownload } from "react-icons/hi";
+
+export const ToolBar = () => { 
+    return (
+        <div className="absolute left-10 top-[50%] z-50 flex flex-col items-center rounded-lg gap-5 p-5 bg-black text-white"
+        style={{
+            transform: "translateY(-50%)"
+        }}
+        >
+            <ColorPicker />
+            <LineWidthPicker />
+         <button className="text-xl">
+            <BsFillChatFill />
+         </button>
+         <button className="text-xl">
+            <BsFillImageFill />
+         </button>
+         <button className="text-xl">
+            <BsThreeDots />
+         </button>
+         <button className="text-xl">
+            <HiOutlineDownload />
+         </button>
+        </div>
+    );
+};

package.json

@@ -15,6 +15,7 @@
     "next": "14.2.4",
     "nodemon": "^3.1.3",
     "react": "^18",
+    "react-colorful": "^5.6.1",
     "react-confetti": "^6.1.0",
     "react-dom": "^18",
     "react-icons": "^5.2.1",