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>
+      <FilesEdit />
     </>
   );
 }

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 />
-          {children}
+          <section id="content" className="container mx-auto gap-4">
+            {children}
+          </section>
         </div>
       </body>
     </html>