From 1142cb950f6725d5064be296794ac1db96cdb625 Mon Sep 17 00:00:00 2001
From: cfngc4594 <cfngc4594@gmail.com>
Date: Fri, 21 Feb 2025 00:10:31 +0800
Subject: [PATCH] feat(page): Implement problem preview and code editor layout

This commit splits the home page into two halves:

- The left half displays a preview of the problem description using the `MdxPreview` component.
- The right half provides a code editor using the `CodeEditor` component.

This improves the user experience by allowing users to view the problem description and write code simultaneously.
---
 src/app/page.tsx | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 07abf38..4838bc6 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,5 +1,16 @@
 import CodeEditor from "@/components/code-editor";
+import { DEFAULT_PROBLEM } from "@/config/problem";
+import MdxPreview from "@/components/problem-description";
 
 export default function Home() {
-  return <CodeEditor />;
+  return (
+    <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>
+  )
 }