From 326cce78364baaf9044c9c244362d90d2108e414 Mon Sep 17 00:00:00 2001
From: cfngc4594 <cfngc4594@gmail.com>
Date: Fri, 21 Feb 2025 21:06:26 +0800
Subject: [PATCH] feat(playground): restructure app layout and implement
 playground with resizable panels

---
 src/app/(app)/page.tsx                        | 15 ++---------
 .../playground/@problemDescription/page.tsx   |  6 +++++
 src/app/(app)/playground/layout.tsx           | 27 +++++++++++++++++++
 src/app/(app)/playground/page.tsx             |  5 ++++
 4 files changed, 40 insertions(+), 13 deletions(-)
 create mode 100644 src/app/(app)/playground/@problemDescription/page.tsx
 create mode 100644 src/app/(app)/playground/layout.tsx
 create mode 100644 src/app/(app)/playground/page.tsx

diff --git a/src/app/(app)/page.tsx b/src/app/(app)/page.tsx
index 5328ccb..509e6e7 100644
--- a/src/app/(app)/page.tsx
+++ b/src/app/(app)/page.tsx
@@ -1,16 +1,5 @@
-import CodeEditor from "@/components/code-editor";
-import { DEFAULT_PROBLEM } from "@/config/problem";
-import MdxPreview from "@/components/problem-description";
+import { redirect } from "next/navigation";
 
 export default function HomePage() {
-  return (
-    <div className="h-full flex items-center">
-      <div className="h-full w-1/2">
-        <MdxPreview source={DEFAULT_PROBLEM} />
-      </div>
-      <div className="h-full w-1/2">
-        <CodeEditor />
-      </div>
-    </div>
-  );
+  redirect("/playground");
 }
diff --git a/src/app/(app)/playground/@problemDescription/page.tsx b/src/app/(app)/playground/@problemDescription/page.tsx
new file mode 100644
index 0000000..10ab28c
--- /dev/null
+++ b/src/app/(app)/playground/@problemDescription/page.tsx
@@ -0,0 +1,6 @@
+import MdxPreview from "@/components/mdx-preview";
+import { DEFAULT_PROBLEM } from "@/config/problem";
+
+export default function ProblemDescriptionPage() {
+  return <MdxPreview source={DEFAULT_PROBLEM} />;
+}
diff --git a/src/app/(app)/playground/layout.tsx b/src/app/(app)/playground/layout.tsx
new file mode 100644
index 0000000..282e98d
--- /dev/null
+++ b/src/app/(app)/playground/layout.tsx
@@ -0,0 +1,27 @@
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from "@/components/ui/resizable";
+
+interface PlaygroundLayoutProps {
+  children: React.ReactNode;
+  problemDescription: React.ReactNode;
+}
+
+export default function PlaygroundLayout({
+  children,
+  problemDescription,
+}: PlaygroundLayoutProps) {
+  return (
+    <ResizablePanelGroup direction="horizontal">
+      <ResizablePanel defaultSize={50}>
+        {problemDescription}
+      </ResizablePanel>
+      <ResizableHandle withHandle />
+      <ResizablePanel defaultSize={50}>
+        {children}
+      </ResizablePanel>
+    </ResizablePanelGroup>
+  );
+}
diff --git a/src/app/(app)/playground/page.tsx b/src/app/(app)/playground/page.tsx
new file mode 100644
index 0000000..95a4454
--- /dev/null
+++ b/src/app/(app)/playground/page.tsx
@@ -0,0 +1,5 @@
+import CodeEditor from "@/components/code-editor";
+
+export default function PlaygroundPage() {
+  return <CodeEditor />;
+}