From 8c6e7a7d0b97ea50efb781791b674b3cd18de507 Mon Sep 17 00:00:00 2001
From: Deveshi Dwivedi <deveshigurgaon@gmail.com>
Date: Sun, 23 Jun 2024 11:29:39 +0530
Subject: [PATCH] add toolbar and its components on left

---
 modules/room/components/Room.tsx              |  2 +-
 modules/room/components/ToolBar.tsx           | 25 ---------
 .../room/components/toolbar/ColorPicker.tsx   | 48 +++++++++++++++++
 .../components/toolbar/LineWidthPicker.tsx    | 51 +++++++++++++++++++
 modules/room/components/toolbar/ToolBar.tsx   | 29 +++++++++++
 package-lock.json                             | 11 ++++
 package.json                                  |  1 +
 7 files changed, 141 insertions(+), 26 deletions(-)
 delete mode 100644 modules/room/components/ToolBar.tsx
 create mode 100644 modules/room/components/toolbar/ColorPicker.tsx
 create mode 100644 modules/room/components/toolbar/LineWidthPicker.tsx
 create mode 100644 modules/room/components/toolbar/ToolBar.tsx

diff --git a/modules/room/components/Room.tsx b/modules/room/components/Room.tsx
index e69ee5c..a87f931 100644
--- a/modules/room/components/Room.tsx
+++ b/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";
 
 
 
diff --git a/modules/room/components/ToolBar.tsx b/modules/room/components/ToolBar.tsx
deleted file mode 100644
index d0c24e3..0000000
--- a/modules/room/components/ToolBar.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import { useSetOptions } from "@/common/recoil/options/options.hooks";
-
-export const ToolBar = () => {
-    const setOptions= useSetOptions ();
-    return (
-        <div className="absolute left-0 top-0 z-50 flex gap-5 bg-black text-white">
-        <button onClick={()=> setOptions((prev)=> ({...prev, lineColor: "red"}))}
-        >
-        red
-        </button>
-        <button onClick={()=> setOptions((prev)=> ({...prev, lineColor: "green"}))}
-        >
-        green
-        </button>
-        <button onClick={()=> setOptions((prev)=> ({...prev, lineColor: "blue"}))}
-        >
-        blue
-        </button>
-        <button onClick={()=> setOptions((prev)=> ({...prev, lineColor: "black"}))}
-        >
-        black
-        </button>
-        </div>
-    );
-};
\ No newline at end of file
diff --git a/modules/room/components/toolbar/ColorPicker.tsx b/modules/room/components/toolbar/ColorPicker.tsx
new file mode 100644
index 0000000..30b0096
--- /dev/null
+++ b/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;
diff --git a/modules/room/components/toolbar/LineWidthPicker.tsx b/modules/room/components/toolbar/LineWidthPicker.tsx
new file mode 100644
index 0000000..7345ef6
--- /dev/null
+++ b/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;
\ No newline at end of file
diff --git a/modules/room/components/toolbar/ToolBar.tsx b/modules/room/components/toolbar/ToolBar.tsx
new file mode 100644
index 0000000..c41cbcc
--- /dev/null
+++ b/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>
+    );
+};
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 6d2f421..b46cefc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,6 +14,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",
@@ -4925,6 +4926,16 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-colorful": {
+      "version": "5.6.1",
+      "resolved": "https://registry.npmjs.org/react-colorful/-/react-colorful-5.6.1.tgz",
+      "integrity": "sha512-1exovf0uGTGyq5mXQT0zgQ80uvj2PCwvF8zY1RN9/vbJVSjSo3fsB/4L3ObbF7u70NduSiK4xu4Y6q1MHoUGEw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
     "node_modules/react-confetti": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/react-confetti/-/react-confetti-6.1.0.tgz",
diff --git a/package.json b/package.json
index 6c9c55a..0a9ac7b 100644
--- a/package.json
+++ b/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",