From e06f28681579b36d64c4390c581cf4f1dc82da4e Mon Sep 17 00:00:00 2001
From: cfngc4594 <cfngc4594@gmail.com>
Date: Sun, 23 Feb 2025 19:17:03 +0800
Subject: [PATCH] feat(playground): add Description and Workspace layouts with
 tabs for better organization

---
 .../(app)/playground/@description/layout.tsx  | 33 +++++++++++++++++++
 .../page.tsx                                  |  2 +-
 .../(app)/playground/@workspace/layout.tsx    | 33 +++++++++++++++++++
 .../playground/{ => @workspace}/page.tsx      |  2 +-
 src/app/(app)/playground/layout.tsx           | 23 +++++++------
 5 files changed, 81 insertions(+), 12 deletions(-)
 create mode 100644 src/app/(app)/playground/@description/layout.tsx
 rename src/app/(app)/playground/{@problemDescription => @description}/page.tsx (75%)
 create mode 100644 src/app/(app)/playground/@workspace/layout.tsx
 rename src/app/(app)/playground/{ => @workspace}/page.tsx (64%)

diff --git a/src/app/(app)/playground/@description/layout.tsx b/src/app/(app)/playground/@description/layout.tsx
new file mode 100644
index 0000000..75aa61f
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/src/app/(app)/playground/@problemDescription/page.tsx b/src/app/(app)/playground/@description/page.tsx
similarity index 75%
rename from src/app/(app)/playground/@problemDescription/page.tsx
rename to src/app/(app)/playground/@description/page.tsx
index 10ab28c..d22ffd8 100644
--- a/src/app/(app)/playground/@problemDescription/page.tsx
+++ b/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} />;
 }
diff --git a/src/app/(app)/playground/@workspace/layout.tsx b/src/app/(app)/playground/@workspace/layout.tsx
new file mode 100644
index 0000000..dbb03fc
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/src/app/(app)/playground/page.tsx b/src/app/(app)/playground/@workspace/page.tsx
similarity index 64%
rename from src/app/(app)/playground/page.tsx
rename to src/app/(app)/playground/@workspace/page.tsx
index 95a4454..6e2714a 100644
--- a/src/app/(app)/playground/page.tsx
+++ b/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 />;
 }
diff --git a/src/app/(app)/playground/layout.tsx b/src/app/(app)/playground/layout.tsx
index d36b75f..88f9d74 100644
--- a/src/app/(app)/playground/layout.tsx
+++ b/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>
   );