Merge pull request #89 from Abh1noob/master

.
CodeChefVIT · Feb 29, 2024 · 8acd6e5 · 8acd6e5
2 parents 37b110a + aec9328
commit 8acd6e5
Showing 1 changed file with 39 additions and 10 deletions.
diff --git a/devsoc24-landing/src/components/terminal/timeline.tsx b/devsoc24-landing/src/components/terminal/timeline.tsx
@@ -12,6 +12,11 @@ export default function Timeline() {
   const [maximized, setMaximized] = useState(false);
   const { activeCard, setActiveCard } = useCloseStore();
   const { selectedComponent, setSelectedComponent } = useSelectedStore();
+  const [showModal, setShowModal] = useState(false);
+
+  const toggleModal = () => {
+    setShowModal(!showModal);
+  };
 
   const handleMinimize = () => {
     setMinimized(!minimized);
@@ -58,7 +63,7 @@ export default function Timeline() {
         ) : (
           <Draggable handle=".drag-handle" bounds=".boundarybox">
             <div
-              className={`flex flex-col min-w-[300px] flex-grow ${maximized ? "h-[100vh] sm:h-full w-[390px] sm:w-[80vw]" : "h-[100px] w-[30vw] pb-10"} border-2 bg-[#b2b2b2]`}
+              className={`flex min-w-[300px] flex-grow flex-col ${maximized ? "h-[100vh] w-[390px] sm:h-full sm:w-[80vw]" : "h-[100px] w-[30vw] pb-10"} border-2 bg-[#b2b2b2]`}
             >
               <div className="drag-handle flex h-[25px] w-[100%] items-center justify-between border-b-2 bg-gradient-to-r from-blue-800 to-blue-600">
                 <span className="flex items-center pl-4 text-xs text-white">
@@ -81,30 +86,54 @@ export default function Timeline() {
                   </span>
                   <span
                     className="mr-1 border-b-[2px] border-r-[2px] border-[#1e1e1e] bg-[#757575] hover:cursor-pointer"
-                    onClick={() =>{
-                      setActiveCard(activeCard.filter((c) => c !== "Timeline"))
-                      setSelectedComponent(null)
+                    onClick={() => {
+                      setActiveCard(activeCard.filter((c) => c !== "Timeline"));
+                      setSelectedComponent(null);
                     }}
-                    onTouchEnd={() =>{
-                      setActiveCard(activeCard.filter((c) => c !== "Timeline"))
-                      setSelectedComponent(null)
+                    onTouchEnd={() => {
+                      setActiveCard(activeCard.filter((c) => c !== "Timeline"));
+                      setSelectedComponent(null);
                     }}
                   >
                     <IoMdClose />
                   </span>
                 </section>
               </div>
 
-              <p className="w-[90%] pl-6 pt-6 ">March 18th - 20th (More details coming soon)</p>
+              <p className="w-[90%] pl-6 pt-6 ">March 18th - 20th</p>
               <button
-                className={`self-end h-6 w-24 border-b-[3px] border-r-[3px] border-[#000000] bg-[#aaa9a9] text-sm transition ease-in-out  hover:h-[26px] hover:w-[98px] hover:duration-75 md:mt-[4px] mr-2`}
-                onClick={openUserModal}
+                className={`mr-2 h-6 w-24 self-end border-b-[3px] border-r-[3px] border-[#000000] bg-[#aaa9a9] text-sm transition  ease-in-out hover:h-[26px] hover:w-[98px] hover:duration-75 md:mt-[4px]`}
+                onClick={() => toggleModal()}
               >
                 Select
               </button>
             </div>
           </Draggable>
         )}
+        {showModal ? (
+          <>
+            <div className="fixed left-0 top-0 z-50 flex h-screen  w-screen items-center justify-center bg-black/60 ">
+              <div className=" relative left-0 top-0 z-50 flex h-fit min-h-[20vh] w-fit  min-w-[40vw] max-w-[90vw] flex-col border-2 border-white bg-[#b2b2b2] md:max-w-[50vw]">
+                <div className="flex h-[25px] w-[100%] items-center justify-between border-b-2 bg-gradient-to-r from-blue-800 to-blue-600">
+                  <span className="font-nokia flex items-center pl-4 text-[10px] text-white">
+                    <GiMoneyStack className="pr-2 text-2xl" />
+                  </span>
+                  <section className="flex">
+                    <span
+                      className="mr-1 border-b-[2px] border-r-[2px] border-[#1e1e1e] bg-[#757575] hover:cursor-pointer"
+                      onClick={() => toggleModal()}
+                    >
+                      <IoMdClose />
+                    </span>
+                  </section>
+                </div>
+                <p className="font-vcr m-5">More details coming soon</p>
+              </div>
+            </div>
+          </>
+        ) : (
+          <></>
+        )}
       </div>
     </div>
   );