From 0644a9f71f47442bd73c6211fbb37b572de4660f Mon Sep 17 00:00:00 2001
From: cfngc4594 <cfngc4594@gmail.com>
Date: Sat, 8 Mar 2025 18:00:13 +0800
Subject: [PATCH] feat(workspace): add WorkspaceLayout with resizable panels

---
 src/app/(app)/problems/[id]/layout.tsx | 39 ++++++++++++++++++++++++++
 1 file changed, 39 insertions(+)
 create mode 100644 src/app/(app)/problems/[id]/layout.tsx

diff --git a/src/app/(app)/problems/[id]/layout.tsx b/src/app/(app)/problems/[id]/layout.tsx
new file mode 100644
index 0000000..0e22364
--- /dev/null
+++ b/src/app/(app)/problems/[id]/layout.tsx
@@ -0,0 +1,39 @@
+import { WorkspaceHeader } from "@/components/workspace-header";
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";
+
+interface WorkspaceLayoutProps {
+  problem: React.ReactNode;
+  editor: React.ReactNode;
+  terminal: React.ReactNode;
+}
+
+export default function WorkspaceLayout({
+  problem,
+  editor,
+  terminal,
+}: WorkspaceLayoutProps) {
+  return (
+    <div className="h-screen flex flex-col">
+      <WorkspaceHeader />
+      <main className="flex flex-grow overflow-y-hidden p-2.5 pt-0">
+        <ResizablePanelGroup direction="horizontal" className="relative h-full flex">
+          <ResizablePanel defaultSize={50} className="border border-muted rounded-3xl">
+            {problem}
+          </ResizablePanel>
+          <ResizableHandle className="mx-1 bg-transparent hover:bg-blue-500" />
+          <ResizablePanel defaultSize={50}>
+            <ResizablePanelGroup direction="vertical">
+              <ResizablePanel defaultSize={75} className="border border-muted rounded-3xl">
+                {editor}
+              </ResizablePanel>
+              <ResizableHandle className="my-1 bg-transparent hover:bg-blue-500" />
+              <ResizablePanel defaultSize={25} className="border border-muted rounded-3xl">
+                {terminal}
+              </ResizablePanel>
+            </ResizablePanelGroup>
+          </ResizablePanel>
+        </ResizablePanelGroup>
+      </main>
+    </div>
+  );
+}