refactor layout

AElfProject · Jul 18, 2024 · d22c017 · d22c017
1 parent efa2820
commit d22c017
Show file tree

Hide file tree

Showing 9 changed files with 68 additions and 12 deletions.
diff --git a/app/@bottom/page.tsx b/app/@bottom/page.tsx
diff --git a/app/@left/@bottom/page.tsx b/app/@left/@bottom/page.tsx
@@ -0,0 +1,3 @@
+export default function LeftBottom() {
+  return <p>bottom left</p>;
+}
diff --git a/app/@left/page.tsx → app/@left/@top/page.tsx b/app/@left/page.tsx → app/@left/@top/page.tsx
@@ -1,5 +1,5 @@
 import FileExplorer from "@/components/file-explorer";
 
-export default function Left() {
+export default function LeftTop() {
   return <FileExplorer />;
 }
diff --git a/app/@left/layout.tsx b/app/@left/layout.tsx
@@ -0,0 +1,6 @@
+import TopBottom from "@/components/top-bottom";
+import { ReactNode } from "react";
+
+export default function Left(props: { top: ReactNode; bottom: ReactNode }) {
+  return <TopBottom {...props} />;
+}
diff --git a/app/@right/@bottom/page.tsx b/app/@right/@bottom/page.tsx
@@ -0,0 +1,12 @@
+"use client";
+
+import { TerminalContextProvider } from "react-terminal";
+import Cli from "@/components/cli";
+
+export default function Bottom() {
+  return (
+    <TerminalContextProvider>
+      <Cli />
+    </TerminalContextProvider>
+  );
+}
diff --git a/app/@top/page.tsx → app/@right/@top/page.tsx b/app/@top/page.tsx → app/@right/@top/page.tsx
diff --git a/app/@right/layout.tsx b/app/@right/layout.tsx
@@ -0,0 +1,6 @@
+import TopBottom from "@/components/top-bottom";
+import { ReactNode } from "react";
+
+export default function Right(props: { top: ReactNode; bottom: ReactNode }) {
+  return <TopBottom {...props} />;
+}
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -3,7 +3,11 @@ import { Inter } from "next/font/google";
 import "./globals.css";
 import { ThemeProvider } from "@/components/theme-provider";
 import { MenubarComponent } from "@/components/menu";
-import { Shell } from "@/components/shell";
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from "@/components/ui/resizable";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -13,13 +17,11 @@ export const metadata: Metadata = {
 };
 
 export default function RootLayout({
-  bottom,
   left,
-  top,
+  right,
 }: Readonly<{
-  bottom: React.ReactNode;
   left: React.ReactNode;
-  top: React.ReactNode;
+  right: React.ReactNode;
 }>) {
   return (
     <html lang="en">
@@ -31,7 +33,13 @@ export default function RootLayout({
           disableTransitionOnChange
         >
           <MenubarComponent />
-          <Shell left={left} top={top} bottom={bottom} />
+          <div className="h-[calc(100vh-40px)]">
+            <ResizablePanelGroup direction="horizontal" className="border">
+              <ResizablePanel defaultSize={25}>{left}</ResizablePanel>
+              <ResizableHandle />
+              <ResizablePanel defaultSize={75}>{right}</ResizablePanel>
+            </ResizablePanelGroup>
+          </div>
         </ThemeProvider>
       </body>
     </html>

diff --git a/components/top-bottom.tsx b/components/top-bottom.tsx
@@ -0,0 +1,26 @@
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from "@/components/ui/resizable";
+import { ReactNode } from "react";
+
+export default function TopBottom({
+  top,
+  bottom,
+}: {
+  top: ReactNode;
+  bottom: ReactNode;
+}) {
+  return (
+    <div className="h-[calc(100vh-40px)]">
+      <ResizablePanelGroup direction="vertical">
+        <ResizablePanel defaultSize={70} className="overflow-y-auto">
+          {top}
+        </ResizablePanel>
+        <ResizableHandle />
+        <ResizablePanel defaultSize={30}>{bottom}</ResizablePanel>
+      </ResizablePanelGroup>
+    </div>
+  );
+}