x

app/app/files/edit/page.tsx

@@ -1,14 +1,30 @@
 "use client";
 
-import React from "react";
+import React, { useCallback } from "react";
 
 import { useSearchParams } from "next/navigation";
+import TextEditor from "@/components/TextEditor";
+import BreadCrumbs from "@/components/FilesEditor/BreadCrumbs";
 
 function Page() {
   const searchParams = useSearchParams();
-  const serverId = searchParams.get("serverid");
+  const serverId = searchParams.get("serverid") || "";
+  const path = searchParams.get("path") || "";
 
-  return <div>{serverId}</div>;
+  const changeDirectory = useCallback((path: string) => {
+    console.log("changeDirectory", path);
+  }, []);
+
+  return (
+    <>
+      <BreadCrumbs
+        changeDirectory={changeDirectory}
+        serverId={serverId}
+        path={path}
+      />
+      <TextEditor />;
+    </>
+  );
 }
 
 export default Page;

app/app/files/page.tsx

@@ -3,9 +3,7 @@ import FilesEdit from "@/components/FilesEditor";
 export default function Files() {
   return (
     <>
-      <section className="container mx-auto">
       <FilesEdit />
-      </section>
     </>
   );
 }

app/app/layout.tsx

@@ -1,7 +1,6 @@
 import type { Metadata } from "next";
 import { Inter } from "next/font/google";
 import "./globals.css";
-import { Console } from "console";
 import ConsoleNavigation from "@/components/ConsoleNavigation";
 
 const inter = Inter({ subsets: ["latin"] });
@@ -24,7 +23,9 @@ export default function RootLayout({
         </header>
         <div id="container">
           <ConsoleNavigation />
+          <section id="content" className="container mx-auto gap-4">
             {children}
+          </section>
         </div>
       </body>
     </html>

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);
+        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,7 +156,6 @@ 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">
@@ -203,7 +202,6 @@ const Console = () => {
           </div>
         </div>
       </div>
-      </section>
     </>
   );
 };