feat(playground): add Description and Workspace layouts with tabs for better organization

src/app/(app)/playground/@description/layout.tsx

@@ -0,0 +1,33 @@
+import { FileTextIcon } from "lucide-react";
+import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+
+interface DescriptionLayoutProps {
+  children: React.ReactNode;
+}
+
+export default function DescriptionLayout({ children }: DescriptionLayoutProps) {
+  return (
+    <Tabs defaultValue="description" className="h-full">
+      <ScrollArea className="h-11 flex items-center pt-1 px-1">
+        <TabsList className="gap-1 bg-transparent">
+          <TabsTrigger
+            value="description"
+            className="data-[state=active]:bg-primary data-[state=active]:text-primary-foreground rounded-full data-[state=active]:shadow-none"
+          >
+            <FileTextIcon
+              className="-ms-0.5 me-1.5 opacity-60"
+              size={16}
+              aria-hidden="true"
+            />
+            Description
+          </TabsTrigger>
+        </TabsList>
+        <ScrollBar orientation="horizontal" />
+      </ScrollArea>
+      <TabsContent value="description" className="h-full mt-0 border-t">
+        {children}
+      </TabsContent>
+    </Tabs>
+  );
+}

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

@@ -1,6 +1,6 @@
 import MdxPreview from "@/components/mdx-preview";
 import { DEFAULT_PROBLEM } from "@/config/problem";
 
-export default function ProblemDescriptionPage() {
+export default function DescriptionPage() {
   return <MdxPreview source={DEFAULT_PROBLEM} />;
 }

src/app/(app)/playground/@workspace/layout.tsx

@@ -0,0 +1,33 @@
+import { CodeXmlIcon } from "lucide-react";
+import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+
+interface WorkspaceLayoutProps {
+  children: React.ReactNode;
+}
+
+export default function WorkspaceLayout({ children }: WorkspaceLayoutProps) {
+  return (
+    <Tabs defaultValue="code" className="h-full">
+      <ScrollArea className="h-11 flex items-center pt-1 px-1">
+        <TabsList className="gap-1 bg-transparent">
+          <TabsTrigger
+            value="code"
+            className="data-[state=active]:bg-primary data-[state=active]:text-primary-foreground rounded-full data-[state=active]:shadow-none"
+          >
+            <CodeXmlIcon
+              className="-ms-0.5 me-1.5 opacity-60"
+              size={16}
+              aria-hidden="true"
+            />
+            Code
+          </TabsTrigger>
+        </TabsList>
+        <ScrollBar orientation="horizontal" />
+      </ScrollArea>
+      <TabsContent value="code" className="h-full mt-0 border-t">
+        {children}
+      </TabsContent>
+    </Tabs>
+  );
+}

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

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

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

@@ -5,22 +5,25 @@ import {
 } from "@/components/ui/resizable";
 
 interface PlaygroundLayoutProps {
-  children: React.ReactNode;
-  problemDescription: React.ReactNode;
+  description: React.ReactNode;
+  workspace: React.ReactNode;
 }
 
 export default function PlaygroundLayout({
-  children,
-  problemDescription,
+  description,
+  workspace,
 }: PlaygroundLayoutProps) {
   return (
-    <ResizablePanelGroup direction="horizontal">
-      <ResizablePanel defaultSize={50}>
-        {problemDescription}
+    <ResizablePanelGroup direction="horizontal" className="p-2.5">
+      <ResizablePanel defaultSize={50} className="border border-muted rounded-2xl">
+        {description}
       </ResizablePanel>
-      <ResizableHandle withHandle className="w-0.5 hover:bg-blue-500" />
-      <ResizablePanel defaultSize={50}>
-        {children}
+      <ResizableHandle
+        withHandle
+        className="w-0.5 bg-transparent hover:bg-blue-500 mx-0.5"
+      />
+      <ResizablePanel defaultSize={50} className="border border-muted rounded-2xl">
+        {workspace}
       </ResizablePanel>
     </ResizablePanelGroup>
   );