Merge pull request #14 from apsinghdev/Feat/add-socials

Feat/add socials

Author: apsinghdev

client/src/App.jsx

@@ -6,6 +6,8 @@ const socket = io("http://localhost:8000");
 
 import Header from "./components/Header";
 import Toolbar from "./components/Toolbar";
+import Socials from "./components/Socials";
+import LoginAndLogout from "./components/LoginAndLogout";
 
 function App() {
   const canvasRef = useRef(null);
@@ -118,15 +120,16 @@ function App() {
     <div id="container" style={{ display: "flex" }}>
       <div
         id="sidebar"
-        className="flex flex-col w-64 bg-zinc-800"
+        className="flex flex-col w-64 bg-zinc-800 relative"
         ref={sidebarRef}
       >
         <Header></Header>
         <Toolbar></Toolbar>
-        
+        <Socials></Socials>
         <button id="clear" onClick={clearOnClick}>
           Clear
         </button>
+        <LoginAndLogout></LoginAndLogout>
       </div>
       <div className="canvas-container">
         <canvas className="canvas" ref={canvasRef}></canvas>

client/src/assets/user-dp.jpg

@@ -0,0 +1,17 @@
+import UserDP from "../assets/user-dp.jpg";
+
+function LoginAndLogout() {
+  return (
+    <div className="flex py-3 rounded-lg justify-around mt-55 bg-gradient-to-r from-indigo-500 from-10% via-sky-500 via-30% to-emerald-500 to-90% w-full items-center bottom-0 absolute">
+      <h1 className="font-sans text-lg antialiased font-semibold text-white">
+        Ajeet
+      </h1>
+      <img
+        src={UserDP}
+        className="rounded-full object-cover h-8 w-8 ml-4"
+      ></img>
+    </div>
+  );
+}
+
+export default LoginAndLogout;

client/src/assets/xlogo.png

@@ -0,0 +1,25 @@
+import Xlogo from "../assets/xlogo.png"
+const link = "https://twitter.com/ajeetonx"; 
+
+function Socials(){
+  function clickHandler(){
+      window.open(link, "_blank");
+  }
+  return (
+    <div className="flex items-center justify-center mt-3">
+      <h1 className="text-white mr-2 cursor-pointer font-sans" onClick={clickHandler}>
+        Built By{" "}
+        <span className="font-mono text-emerald-300 hover:lowercase">
+          AJEET
+        </span>
+      </h1>
+      <img
+        src={Xlogo}
+        className="h-6 w-6 rounded cursor-pointer"
+        onClick={clickHandler}
+      ></img>
+    </div>
+  );
+}
+
+export default Socials;