new featerus

app/components/WebConsole/index.tsx

@@ -1,10 +1,12 @@
 "use client";
 
 import React, { useEffect, useState, useRef } from "react";
+
 import Stats from "./stats";
 import ServerName from "./serverName";
 import ServerControl from "./serverControl";
 import ServerStatus from "./serverStatus";
+import Navigation from "../ConsoleNavigation";
 
 const Console = () => {
   const [apiKey, setApiKey] = useState("");
@@ -24,9 +26,11 @@ const Console = () => {
   const websocketRef = useRef<WebSocket | null>(null); // Dodajemy ref do WebSocket
   const textareaRef = useRef<HTMLTextAreaElement>(null); // Dodajemy referencję do textarea
 
-  const fetchData = async (apiKey: string) => {
+  const setCredentials = async () => {
     setApiKey("ptlc_aDGU4VHNQuN5t6dyxNzVon3UZLR5ehuySmdR7xsUbMm");
+  };
 
+  const fetchData = async (apiKey: string) => {
     console.log("Fetching data...");
     console.log(apiKey);
     try {
@@ -56,6 +60,7 @@ const Console = () => {
   };
 
   useEffect(() => {
+    setCredentials();
     fetchData(apiKey);
     fetchStats();
   }, [apiKey]);
@@ -152,52 +157,57 @@ const Console = () => {
   };
 
   return (
-    <div className="flex flex-col gap-4">
-      <div className="flex gap-4">
-        <div className="w-4/5 flex justify-self-auto justify-between items-center">
-          <ServerName serverName="asdf " />
-          <ServerStatus serverStatus={serverStatus} />
-        </div>
-        <div className="w-1/5 flex justify-between">
-          <ServerControl websocketRef={websocketRef} />
-        </div>
-      </div>
+    <>
+      <Navigation />
+      <section className="container mx-auto">
+        <div className="flex flex-col gap-4">
+          <div className="flex gap-4">
+            <div className="w-4/5 flex justify-self-auto justify-between items-center">
+              <ServerName serverName="asdf " />
+              <ServerStatus serverStatus={serverStatus} />
+            </div>
+            <div className="w-1/5 flex justify-between">
+              <ServerControl websocketRef={websocketRef} />
+            </div>
+          </div>
 
-      <div className="flex gap-4">
-        <div className="w-4/5">
-          <div>
-            <textarea
-              className="textarea textarea-bordered text-yellow-200 w-full"
-              ref={textareaRef}
-              cols={110}
-              rows={20}
-              value={output.join("\n")}
-              readOnly
-            />
-          </div>
-          <div>
-            <input
-              className="input input-bordered w-full text-yellow-200"
-              type="text"
-              value={input}
-              onChange={(e) => setInput(e.target.value)}
-              onKeyPress={handleKeyPress}
-            />
+          <div className="flex gap-4">
+            <div className="w-4/5">
+              <div>
+                <textarea
+                  className="textarea textarea-bordered text-yellow-200 w-full"
+                  ref={textareaRef}
+                  cols={110}
+                  rows={20}
+                  value={output.join("\n")}
+                  readOnly
+                />
+              </div>
+              <div>
+                <input
+                  className="input input-bordered w-full text-yellow-200"
+                  type="text"
+                  value={input}
+                  onChange={(e) => setInput(e.target.value)}
+                  onKeyPress={handleKeyPress}
+                />
+              </div>
+            </div>
+            <div className="w-1/5">
+              <Stats
+                cpu={cpuStat}
+                ramUsage={ramStat}
+                ramTotal={ramTotal}
+                diskUsage={diskUsage}
+                diskTotal={diskTotal}
+                network={network}
+                uptime={uptime}
+              />
+            </div>
           </div>
         </div>
-        <div className="w-1/5">
-          <Stats
-            cpu={cpuStat}
-            ramUsage={ramStat}
-            ramTotal={ramTotal}
-            diskUsage={diskUsage}
-            diskTotal={diskTotal}
-            network={network}
-            uptime={uptime}
-          />
-        </div>
-      </div>
-    </div>
+      </section>
+    </>
   );
 };