Draggable window linked to terminal icon

app/page.tsx

@@ -19,7 +19,9 @@ function Home() {
         />
       </div>
       <Navbar />
-      <CodeBox />
+      <CodeBox toggleWindow={function (): void {
+        throw new Error('Function not implemented.');
+      } } isClosed={false} />
       <CalendarComponent/>
       <Dock />
     </div>

components/home/CodeBox/CodeBox.tsx

@@ -6,23 +6,17 @@ interface TerminalHistory {
   output: string;
 }
 
-const CodeBox: React.FC = () => {
-  const [isClosed, setIsClosed] = useState<boolean>(false);  // Track whether the window is closed
+interface CodeBoxProps {
+  toggleWindow: () => void;
+  isClosed: boolean;
+}
+
+const CodeBox: React.FC<CodeBoxProps> = ({ toggleWindow, isClosed }) => {
   const [currentPage, setCurrentPage] = useState<string>('index.js');
   const [isTerminalActive, setIsTerminalActive] = useState<boolean>(false);
   const [terminalInput, setTerminalInput] = useState<string>('');
   const [terminalHistory, setTerminalHistory] = useState<TerminalHistory[]>([]);
 
-  // Function to close the window
-  const handleCloseClick = () => {
-    setIsClosed(true);
-  };
-
-  // Function to open the window again
-  const handleReopenClick = () => {
-    setIsClosed(false);
-  };
-
   const handleTerminalClick = () => {
     setIsTerminalActive(true);
   };
@@ -44,9 +38,9 @@ const CodeBox: React.FC = () => {
     } else if (terminalInput === 'nuxt') {
       window.location.href = "https://www.youtube.com/watch?v=dQw4w9WgXcQ";
     } else if (terminalInput === 'jesus') {
-      window.location.href === "https://www.youtube.com/watch?v=LsGcIkevyHM";
+      window.location.href = "https://www.youtube.com/watch?v=LsGcIkevyHM";
     } else if (terminalInput === 'new window') {
-      window.location.href === "https://mock-os-iota.vercel.app/";
+      window.location.href = "https://mock-os-iota.vercel.app/";
     } else {
       output = 'Command not recognized';
     }
@@ -99,15 +93,7 @@ const CodeBox: React.FC = () => {
 
   return (
     <div className="h-screen flex justify-center items-center relative">
-
-      {isClosed ? (
-        <button
-          onClick={handleReopenClick}
-          className="bg-blue-500 text-white p-2 rounded-md absolute bottom-10 left-10"
-        >
-          Reopen Window
-        </button>        
-      ) : (
+      {!isClosed && (
         <Draggable handle=".handle-drag">
           <div className="bg-gray-800 rounded-lg shadow-xl p-4 relative" style={codeEditorStyles}>
             <div
@@ -116,7 +102,10 @@ const CodeBox: React.FC = () => {
             >
               <div style={{ flex: 1, display: 'flex', alignItems: 'center', gap: 10 }}>
                 <div className="flex gap-1">
-                  <div className="w-2.5 h-2.5 bg-red-500 rounded-full cursor-pointer" onClick={handleCloseClick}></div>
+                  <div
+                    className="w-2.5 h-2.5 bg-red-500 rounded-full cursor-pointer"
+                    onClick={toggleWindow}
+                  ></div>
                   <div className="w-2.5 h-2.5 bg-yellow-500 rounded-full"></div>
                   <div className="w-2.5 h-2.5 bg-green-500 rounded-full"></div>
                 </div>

components/home/Dock/Dock.tsx

@@ -1,42 +1,49 @@
 "use client";
-import React from 'react';
+import React, { useState } from 'react';
 import { Dock } from 'react-osx-dock';
+import CodeBox from '../CodeBox/CodeBox';
 
 const DockMain = () => {
+  const [isClosed, setIsClosed] = useState<boolean>(true); // Initially hidden
+
+  const toggleWindow = () => {
+    setIsClosed(!isClosed);
+  };
+
   return (
     <div>
+      {/* Pass isClosed and toggleWindow to CodeBox */}
+      <CodeBox toggleWindow={toggleWindow} isClosed={isClosed} />
+
       <div className="fixed bottom-2 left-1/2 transform -translate-x-1/2">
-        {/*<div className="bg-opacity-10 backdrop-blur rounded-2xl p-4 border border-[#ffffff25] dock-container">*/}
-          <Dock itemWidth={50} magnification={1} magnifyDirection='up'>
-            {['finder', 'slack', 'spotify', 'guitar-pro', 'terminal', 'trash'].map(
-              (letter) => (
-                <img
-                  className="letter"
-                  src={`${letter}.png`}
-                  onClick={() => {
-                    if (letter=='finder') {
-                      window.location.href = "https://www.apple.in";
-                    } else if (letter=='slack') {
-                      window.location.href = "https://www.slack.com";
-                    } else if (letter=='spotify') {
-                      window.location.href = "https://www.spotify.com";
-                    } else if (letter=='guitar-pro') {
-                      window.location.href = "https://www.image-line.com/";
-                    } else if (letter=='terminal') {
-                      window.location.href = "https://www.onlinegdb.com/";
-                    } else if (letter=='trash') {
-                      window.location.href = "https://www.youtube.com";
-                    }
-                  }}
-                  key={letter}
-                />
-              )
-            )}
-          </Dock>
-        </div>
+        <Dock itemWidth={50} magnification={1} magnifyDirection="up">
+          {['finder', 'slack', 'spotify', 'guitar-pro', 'terminal', 'trash'].map((letter) => (
+            <img
+              className="letter"
+              src={`${letter}.png`}
+              onClick={() => {
+                if (letter === 'finder') {
+                  window.location.href = "https://www.apple.in";
+                } else if (letter === 'slack') {
+                  window.location.href = "https://www.slack.com";
+                } else if (letter === 'spotify') {
+                  window.location.href = "https://www.spotify.com";
+                } else if (letter === 'guitar-pro') {
+                  window.location.href = "https://www.image-line.com/";
+                } else if (letter === 'terminal') {
+                  toggleWindow();
+                } else if (letter === 'trash') {
+                  window.location.href = "https://www.youtube.com";
+                }
+              }}
+              key={letter}
+              alt={`${letter} icon`}
+            />
+          ))}
+        </Dock>
       </div>
-    //</div>
+    </div>
   );
-}
+};
 
-export default DockMain
+export default DockMain;