From ad8a3e646e021808d2fb9f79b86bba0239dbb461 Mon Sep 17 00:00:00 2001
From: cfngc4594 <cfngc4594@gmail.com>
Date: Tue, 13 May 2025 16:37:35 +0800
Subject: [PATCH] feat(code-panel): add code editor panel components

- Add CodePanel component as container for editor interface
- Add CodeContent component with Prisma data fetching
- Include CodeContentSkeleton for loading state
- Implement ProblemEditor integration with templates
---
 .../problems/code/components/content.tsx      | 21 ++++++++++++++++
 .../problems/code/components/panel.tsx        | 25 +++++++++++++++++++
 2 files changed, 46 insertions(+)
 create mode 100644 src/features/problems/code/components/content.tsx
 create mode 100644 src/features/problems/code/components/panel.tsx

diff --git a/src/features/problems/code/components/content.tsx b/src/features/problems/code/components/content.tsx
new file mode 100644
index 0000000..bca3087
--- /dev/null
+++ b/src/features/problems/code/components/content.tsx
@@ -0,0 +1,21 @@
+import prisma from "@/lib/prisma";
+import { Loading } from "@/components/loading";
+import { ProblemEditor } from "@/components/problem-editor";
+
+interface CodeContentProps {
+  problemId: string;
+}
+
+export const CodeContent = async ({ problemId }: CodeContentProps) => {
+  const templates = await prisma.template.findMany({
+    where: {
+      problemId,
+    },
+  });
+
+  return <ProblemEditor problemId={problemId} templates={templates} />;
+};
+
+export const CodeContentSkeleton = () => {
+  return <Loading />;
+};
diff --git a/src/features/problems/code/components/panel.tsx b/src/features/problems/code/components/panel.tsx
new file mode 100644
index 0000000..4604c2b
--- /dev/null
+++ b/src/features/problems/code/components/panel.tsx
@@ -0,0 +1,25 @@
+import { Suspense } from "react";
+import {
+  CodeContent,
+  CodeContentSkeleton,
+} from "@/features/problems/code/components/content";
+import { CodeToolbar } from "@/features/problems/code/components/toolbar/code-toolbar";
+
+interface CodePanelProps {
+  problemId: string;
+}
+
+export const CodePanel = ({ problemId }: CodePanelProps) => {
+  return (
+    <div className="h-full flex flex-col border border-t-0 border-muted rounded-b-3xl bg-background overflow-hidden">
+      <CodeToolbar className="border-b" />
+      <div className="relative flex-1">
+        <div className="absolute h-full w-full">
+          <Suspense fallback={<CodeContentSkeleton />}>
+            <CodeContent problemId={problemId} />
+          </Suspense>
+        </div>
+      </div>
+    </div>
+  );
+};