implement colorpicker and strokePicker components

Author: apsinghdev

client/src/App.jsx

@@ -1,10 +1,11 @@
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useRef } from "react";
 import "./App.css";
 import { io } from "socket.io-client";
 
 const socket = io("http://localhost:8000");
 
 import Header from "./components/Header";
+import Toolbar from "./components/Toolbar";
 
 function App() {
   const canvasRef = useRef(null);
@@ -117,25 +118,12 @@ function App() {
     <div id="container" style={{ display: "flex" }}>
       <div
         id="sidebar"
-        className="flex flex-col w-64 bg-gray-900"
+        className="flex flex-col w-64 bg-zinc-800"
         ref={sidebarRef}
       >
         <Header></Header>
-        <h1 id="drawRTC">drawRTC</h1>
-        <div className="input-container" id="colorpicker">
-          <label htmlFor="stroke">Stroke</label>
-          <input id="stroke" name="stroke" type="color" onChange={addStroke} />
-        </div>
-        <div className="input-container" id="linewidth">
-          <label htmlFor="lineWidth">Line Width</label>
-          <input
-            id="lineWidth"
-            name="lineWidth"
-            type="number"
-            defaultValue="3"
-            onChange={addLineWidth}
-          />
-        </div>
+        <Toolbar></Toolbar>
+        
         <button id="clear" onClick={clearOnClick}>
           Clear
         </button>

client/src/components/ColorPicker.jsx

@@ -0,0 +1,17 @@
+/* eslint-disable react/prop-types */
+function ColorPicker(props){
+    return (
+      <div className="flex p-1 items-center justify-around">
+        <h1 className="font-sans text-lg antialiased font-semibold text-white">
+          {props.name}
+        </h1>
+        <input
+          type="color"
+          value={props.defaultColor}
+          className="p-1 h-10 w-14 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>
+    );
+}
+
+export default ColorPicker;

client/src/components/Header.jsx

@@ -2,7 +2,7 @@ import { FaBars } from "react-icons/fa";
 
 function Header() {
   return (
-    <div className="flex border-b-2 py-5 justify-around bg-gradient-to-r from-indigo-500 from-10% via-sky-500 via-30% to-emerald-500 to-90% w-full items-center">
+    <div className="flex py-5 justify-around bg-gradient-to-r from-indigo-500 from-10% via-sky-500 via-30% to-emerald-500 to-90% w-full items-center">
       <h1 className="font-sans text-2xl antialiased font-extrabold text-white">
         drawRTC
       </h1>

client/src/components/StrokeWidthPicker.jsx

@@ -0,0 +1,17 @@
+function StrokeWidthPicker(){
+    return (
+      <div className="flex p-1 items-center justify-around">
+        <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-7 block border border-gray-800 cursor-pointer rounded-lg"
+        ></input>
+      </div>
+    );
+}
+
+export default StrokeWidthPicker;

client/src/components/Toolbar.jsx

@@ -0,0 +1,13 @@
+import ColorPicker from "./ColorPicker";
+import StrokeWidthPicker from "./StrokeWidthPicker";
+
+function Toolbar(){
+    return (
+      <div className="block w-full mt-20">
+        <ColorPicker name="Colors :" defaultColor="#000000"></ColorPicker>
+        <ColorPicker name="Canvas :" defaultColor="#FFFFFF"></ColorPicker>
+        <StrokeWidthPicker></StrokeWidthPicker>
+      </div>
+    );
+}
+export default Toolbar;