From a851223d9fb0781e91961deec80c3e3cc4823b84 Mon Sep 17 00:00:00 2001
From: cfngc4594 <cfngc4594@gmail.com>
Date: Sat, 8 Mar 2025 18:31:54 +0800
Subject: [PATCH] feat(problem): add problem layout with tabs for description,
 solution, and submission

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

diff --git a/src/app/(app)/problems/[id]/@problem/layout.tsx b/src/app/(app)/problems/[id]/@problem/layout.tsx
new file mode 100644
index 0000000..2ccbcb4
--- /dev/null
+++ b/src/app/(app)/problems/[id]/@problem/layout.tsx
@@ -0,0 +1,58 @@
+import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { CircleCheckBigIcon, FileTextIcon, FlaskConicalIcon } from "lucide-react";
+
+interface ProblemLayoutProps {
+  description: React.ReactNode;
+  solution: React.ReactNode;
+  submission: React.ReactNode;
+}
+
+export default function ProblemLayout({
+  description,
+  solution,
+  submission,
+}: ProblemLayoutProps) {
+  return (
+    <Tabs defaultValue="description" className="h-full">
+      <ScrollArea className="bg-muted">
+        <TabsList>
+          <TabsTrigger value="description">
+            <FileTextIcon
+              className="-ms-0.5 me-1.5 opacity-60"
+              size={16}
+              aria-hidden="true"
+            />
+            Description
+          </TabsTrigger>
+          <TabsTrigger value="solution" className="group">
+            <FlaskConicalIcon
+              className="-ms-0.5 me-1.5 opacity-60"
+              size={16}
+              aria-hidden="true"
+            />
+            Solution
+          </TabsTrigger>
+          <TabsTrigger value="submission" className="group">
+            <CircleCheckBigIcon
+              className="-ms-0.5 me-1.5 opacity-60"
+              size={16}
+              aria-hidden="true"
+            />
+            Submission
+          </TabsTrigger>
+        </TabsList>
+        <ScrollBar orientation="horizontal" />
+      </ScrollArea>
+      <TabsContent value="description" className="h-full mt-0">
+        {description}
+      </TabsContent>
+      <TabsContent value="solution">
+        {solution}
+      </TabsContent>
+      <TabsContent value="submission">
+        {submission}
+      </TabsContent>
+    </Tabs>
+  );
+}