x

app/components/BreadCrumbs/index.tsx

@@ -0,0 +1,16 @@
+"use client";
+
+import React, { Children } from "react";
+import { useParams } from "next/navigation";
+
+interface Props {
+  children: React.ReactNode;
+}
+
+const BreadCrumbs = ({ children }: Props) => {
+  const { serverid, path } = useParams();
+
+  return <div>{children}</div>;
+};
+
+export default BreadCrumbs;

app/components/FilesEditor/index.tsx

@@ -10,6 +10,7 @@ import RenamePopup from "./ContextMenu/rename";
 import Pterodactyl from "@/components/Pterodactyl";
 import BreadCrumbs from "./BreadCrumbs";
 import { useSearchParams } from "next/navigation";
+import Link from "next/link";
 
 interface FileAttributes {
   name: string;
@@ -58,6 +59,7 @@ const Index = () => {
   const [path, setPath] = useState<string>("/");
   const urlParams = useSearchParams();
   const serverId = urlParams.get("serverid");
+  const pathParam = urlParams.get("path");
 
   const setCredentials = useCallback(() => {
     setApiKey("ptlc_N77A2hEczFmSwGXm4cEXh4Gw3ZP0Ygr5NaBkGlE7pjU");
@@ -116,7 +118,11 @@ const Index = () => {
       await setCredentials();
       if (apiKey && serverId) {
         const pteroInstance = new Pterodactyl(serverId, apiKey);
-        pteroInstance.helpers.setWorkingDirectory(path);
+        if (!pathParam) {
+          pteroInstance.helpers.setWorkingDirectory(path);
+        } else {
+          pteroInstance.helpers.setWorkingDirectory(pathParam);
+        }
         setPtero(pteroInstance);
         await fetchFiles(pteroInstance);
       }
@@ -166,7 +172,9 @@ const Index = () => {
             </div>
             <div className="w-64 text-left">
               {file.attributes.is_file ? (
-                <a href="#">{file.attributes.name}</a>
+                <Link href={`/files/edit?serverid=${serverId}&path=${path}`}>
+                  {file.attributes.name}
+                </Link>
               ) : (
                 <a
                   onClick={() =>

app/components/WebConsole/index.tsx

@@ -156,54 +156,52 @@ const Console = () => {
 
   return (
     <>
-      <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 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>
+        <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 className="w-1/5">
-              <Stats
-                cpu={cpuStat}
-                ramUsage={ramStat}
-                ramTotal={ramTotal}
-                diskUsage={diskUsage}
-                diskTotal={diskTotal}
-                network={network}
-                uptime={uptime}
+            <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>
-      </section>
+      </div>
     </>
   );
 };