feat(playground): restructure app layout and implement playground with resizable panels

src/app/(app)/page.tsx

@@ -1,16 +1,5 @@
-import CodeEditor from "@/components/code-editor";
+import { redirect } from "next/navigation";
-import { DEFAULT_PROBLEM } from "@/config/problem";
-import MdxPreview from "@/components/problem-description";
 
 export default function HomePage() {
-  return (
+  redirect("/playground");
-    <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>
-  );
 }

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

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

src/app/(app)/playground/page.tsx

@@ -0,0 +1,5 @@
+import CodeEditor from "@/components/code-editor";
+
+export default function PlaygroundPage() {
+  return <CodeEditor />;
+}