Merge pull request #9 from apsinghdev/Feat/create-sidebar-UI

Feat/create sidebar UI

Author: apsinghdev

client/package-lock.json

@@ -12,6 +12,7 @@
   "dependencies": {
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-icons": "^5.2.0",
     "socket.io-client": "^4.7.4"
   },
   "devDependencies": {

client/package.json

@@ -1,22 +1,21 @@
-
 #root {
     height: 100vh;
     width: 100vw;
   }
 
-#sidebar * {
+/* #sidebar * {
     margin-bottom: 6px;
-  }
+  } */
 
-  #sidebar h1 {
+  /* #sidebar h1 {
     margin-top: '20px';
     background: #7F7FD5;
     background: -webkit-linear-gradient(to right, #91EAE4, #86A8E7, #7F7FD5);
     background: linear-gradient(to right, #91EAE4, #86A8E7, #7F7FD5);
     background-clip: text;
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
-  }
+  } */
 
   #linewidth{
     margin-top: 10px !important; 
@@ -28,14 +27,14 @@
     width: 100%;
  }
 
- #sidebar{
+ /* #sidebar{
     display: flex;
     flex-direction: column;
     padding: 5px;
     width: 250px;
     background-color: #202020;
     padding-left: 15px;
- }
+ } */
   .input-container {
     display: block;
     margin-top: 40px;

client/src/App.css

@@ -1,9 +1,12 @@
-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);
   const sidebarRef = useRef(null);
@@ -113,27 +116,14 @@ function App() {
 
   return (
     <div id="container" style={{ display: "flex" }}>
-      <div id="sidebar" ref={sidebarRef}>
-        <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>
+      <div
+        id="sidebar"
+        className="flex flex-col w-64 bg-zinc-800"
+        ref={sidebarRef}
+      >
+        <Header></Header>
+        <Toolbar></Toolbar>
+        
         <button id="clear" onClick={clearOnClick}>
           Clear
         </button>

client/src/App.jsx

@@ -0,0 +1,14 @@
+function ClearBtn(){
+    return (
+      <div className="border block flex items-center justify-center mt-5">
+        <button
+          type="button"
+          className="text-white bg-gradient-to-r from-red-400 via-red-500 to-red-600 hover:bg-gradient-to-br font-medium rounded-lg text-sm px-5 py-2.5 text-center"
+        >
+          Clear
+        </button>
+      </div>
+    );
+}
+
+export default ClearBtn;

client/src/components/ClearBtn.jsx

@@ -0,0 +1,17 @@
+/* eslint-disable react/prop-types */
+function ColorPicker(props){
+    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}
+          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/ColorPicker.jsx

@@ -0,0 +1,16 @@
+import { FaBars } from "react-icons/fa";
+
+function Header() {
+  return (
+    <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>
+      <div className="" id="options">
+        <FaBars size={25} />
+      </div>
+    </div>
+  );
+}
+
+export default Header;

client/src/components/Header.jsx

@@ -0,0 +1,17 @@
+function StrokeWidthPicker(){
+    return (
+      <div className="flex p-1 items-center justify-around mt-4">
+        <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-md"
+        ></input>
+      </div>
+    );
+}
+
+export default StrokeWidthPicker;

client/src/components/Socials.jsx

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