added worspace page

Parth-Sinha · Jan 23, 2024 · c7ffb6b · c7ffb6b
1 parent 285b349
commit c7ffb6b
Show file tree

Hide file tree

Showing 5 changed files with 134 additions and 19 deletions.
diff --git a/client/src/components/GoUpArrow/GoUpArrow.css b/client/src/components/GoUpArrow/GoUpArrow.css
@@ -0,0 +1,27 @@
+.go-up-arrow {
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    background-color: #007bff;
+    color: #fff;
+    border: none;
+    padding: 10px;
+    border-radius: 50%;
+    cursor: pointer;
+    font-size: 1.5em;
+    transition: opacity 0.3s ease-in-out;
+    height: 3rem;
+    width: 3rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .go-up-arrow.hidden {
+    opacity: 0;
+    pointer-events: none; /* Disable clicking when hidden */
+  }
+
+  .go-up-arrow:hover {
+    opacity: 0.8;
+  }
diff --git a/client/src/components/GoUpArrow/GoUpArrow.js b/client/src/components/GoUpArrow/GoUpArrow.js
@@ -0,0 +1,39 @@
+import React, { useState, useEffect } from 'react';
+import './GoUpArrow.css'; // Import your CSS file
+
+const GoUpArrow = () => {
+  const [isVisible, setIsVisible] = useState(false);
+
+  useEffect(() => {
+    // Show the "Go Up" arrow when scrolling down
+    const handleScroll = () => {
+      if (window.scrollY > 100) {
+        setIsVisible(true);
+      } else {
+        setIsVisible(false);
+      }
+    };
+
+    window.addEventListener('scroll', handleScroll);
+
+    // Clean up the event listener when the component unmounts
+    return () => {
+      window.removeEventListener('scroll', handleScroll);
+    };
+  }, []);
+
+  const scrollToTop = () => {
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+  };
+
+  return (
+    <div
+      className={`go-up-arrow ${isVisible ? 'visible' : 'hidden'}`}
+      onClick={scrollToTop}
+    >
+      <i class="fa-solid fa-arrow-up"></i>
+    </div>
+  );
+};
+
+export default GoUpArrow;
diff --git a/client/src/components/Maindashboard/UrlTextBox.js b/client/src/components/Maindashboard/UrlTextBox.js
@@ -8,26 +8,20 @@ function UrlTextBox({
 
     }
     return (
-        // <div className="h-[76px] relative flex justify-end">
+        <div className="w-1/2 h-[76px] relative flex justify-end">
 
-        //     <div className="w-1/4 h-[60px] pl-[25px] pr-[25.05px] py-[21px] mt-2 bg-blue-700 rounded-[48px] shadow border border-blue-700 justify-center items-center inline-flex">
-        //         <button className="text-center text-white text-base font-semibold font-['Inter'] leading-[18px]" onClick={handleShortenClick}>Shorten Now!</button>
-        //     </div>
-        //     <div className="w-3/4 h-[76px] pl-[25px] pr-[25.19px] py-[14px] left-0 top-0 absolute bg-gray-900 rounded-[48px] shadow border-4 border-blue-700 border-opacity-10 justify-start items-center inline-flex">
-        //         <div className="w-full justify-center items-center gap-5 flex">
-        //             <div className="text-center text-gray-300 text-xl font-light font-['Font Awesome 6 Pro'] leading-7" hidden = {isLinkhidden}>link</div>
-        //             <div className="w-full justify-start items-center gap-[5px] flex">
-        //                 <input className="w-full text-gray-300 border-none bg-transparent select-none bg-gray-900 rounded-[48px] text-base font-light font-['Inter'] leading-7 " type="text" name='linkInput' placeholder='https://www.google.com' style={{outline:"none"}}/>
-        //             </div>
-        //         </div>
-        //     </div>
+            <div className="w-1/4 h-[60px] pl-[25px] pr-[25.05px] py-[21px] mt-2 bg-blue-700 rounded-[48px] shadow border border-blue-700 justify-center items-center inline-flex">
+                <button className="text-center text-white text-base font-semibold font-['Inter'] leading-[18px]" onClick={handleShortenClick}>Shorten Now!</button>
+            </div>
+            <div className="w-3/4 h-[76px] pl-[25px] pr-[25.19px] py-[14px] left-0 top-0 absolute bg-gray-900 rounded-[48px] shadow border-4 border-blue-700 border-opacity-10 justify-start items-center inline-flex">
+                <div className="w-full justify-center items-center gap-5 flex">
+                    <div className="text-center text-gray-300 text-xl font-light font-['Font Awesome 6 Pro'] leading-7" hidden = {isLinkhidden}>link</div>
+                    <div className="w-full justify-start items-center gap-[5px] flex">
+                        <input className="w-full text-gray-300 border-none bg-transparent select-none bg-gray-900 rounded-[48px] text-base font-light font-['Inter'] leading-7 " type="text" name='linkInput' placeholder='https://www.google.com' style={{outline:"none"}}/>
+                    </div>
+                </div>
+            </div>
 
-        // </div>
-
-        <div className='flex p-4 sm:text-xl text-md items-center text-white  w-[100%]  sm:w-[35rem] justify-center'>
-            <div className='border-2 border-r-1 p-2 rounded-l-lg' hidden={isLinkhidden}><label for="link">Link</label></div>
-            <div><input id="link"className='border-y-2 p-2 bg-blue-700 focus:outline-none focus:bg-blue-700 sm:w-[20rem] w-[9.6rem]' type='text' placeholder='Enter your link here'/></div>
-            <div className='border-2 p-2 bg-cyan-500 border-l-.5 rounded-r-lg'><button onClick={handleShortenClick}>Shorten</button></div>
         </div>
     )
 }

diff --git a/client/src/components/TeamList.js b/client/src/components/TeamList.js
@@ -33,6 +33,54 @@ const TeamList = () => {
                 <div className="collapsible h-0 overflow-hidden transition-all duration-300 ease-in-out">
                     <Urls />
                 </div>
+
+
+            </div>
+
+            <div className="bg-slate-800 my-4 rounded-xl">
+                <div className="flex flex-col sm:flex-row sm:justify-between p-2 pl-3 sm:p-5 text-lg rounded-t-xl bg-cyan-600 sm:leading-10 items-left">
+                    <div className="overflow-hidden">
+                        <div className="text-2xl">Team Name</div>
+                        <div>Created by Admin Name</div>
+                        <div><span className="m-1"><i class="fa-solid fa-calendar-days"></i></span><span>23-01-2024</span></div>
+                    </div>
+                    <div className="flex-col flex sm:items-end items-center min-w-[14rem]">
+                        <button className="" onClick={() => { handleShowUrls(1) }}><span className="m-1"><i class="fa-solid fa-list"></i></span>Show URLs<span></span></button>
+                        <button><span className="m-1"><i class="fa-solid fa-plus"></i></span>Add link<span></span></button>
+                        <button><span className="m-1"><i class="fa-solid fa-sign-out-alt"></i></span>Leave team<span></span></button>
+
+                    </div>
+
+
+                </div>
+                <div className="collapsible h-0 overflow-hidden transition-all duration-300 ease-in-out">
+                    <Urls />
+                </div>
+
+
+            </div>
+
+            <div className="bg-slate-800 my-4 rounded-xl">
+                <div className="flex flex-col sm:flex-row sm:justify-between p-2 pl-3 sm:p-5 text-lg rounded-t-xl bg-cyan-600 sm:leading-10 items-left">
+                    <div className="overflow-hidden">
+                        <div className="text-2xl">Team Name</div>
+                        <div>Created by Admin Name</div>
+                        <div><span className="m-1"><i class="fa-solid fa-calendar-days"></i></span><span>23-01-2024</span></div>
+                    </div>
+                    <div className="flex-col flex sm:items-end items-center min-w-[14rem]">
+                        <button className="" onClick={() => { handleShowUrls(2) }}><span className="m-1"><i class="fa-solid fa-list"></i></span>Show URLs<span></span></button>
+                        <button><span className="m-1"><i class="fa-solid fa-plus"></i></span>Add link<span></span></button>
+                        <button><span className="m-1"><i class="fa-solid fa-sign-out-alt"></i></span>Leave team<span></span></button>
+
+                    </div>
+
+
+                </div>
+                <div className="collapsible h-0 overflow-hidden transition-all duration-300 ease-in-out">
+                    <Urls />
+                </div>
+
+
             </div>
 
 

diff --git a/client/src/components/Workspace.js b/client/src/components/Workspace.js
@@ -2,19 +2,26 @@ import React from "react";
 import UrlTextBox from "./Maindashboard/UrlTextBox";
 import Urls from "./Urls";
 import TeamList from "./TeamList";
+import GoUpArrow from "./GoUpArrow/GoUpArrow";
+
 const Workspace = () => {
 
   function handleUserDropdown(){
     const elem = document.getElementById("userDropdown");
     elem.classList.toggle("hidden");
   }
 
+
+
   return (
     <div className="bg-[#121212] text-white pb-2">
 
+      {/* top-arrow */}
+     <GoUpArrow />
+
 
       {/* navbar */}
-      <div className="flex justify-between py-2 pl-4 pr-[5%] items-center">
+      <div className="flex justify-between py-2 pl-4 pr-[5%] items-center sticky top-0 bg-[#121212] z-10">
         <div className="text-center text-cyan-500 text-[2.307rem] font-extrabold font-['Inter']">Slinkly</div>
         <div className="flex justify-center items-center">
           <button className="mr-10 text-xl p-1.5  rounded-md bg-cyan-500 hidden sm:inline">PREMIUM</button>