Add UserLayout

oj-lab · Sep 24, 2023 · e7b2f2c · e7b2f2c
1 parent 5d05e3a
commit e7b2f2c
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 40 deletions.
diff --git a/src/layouts/userLayout/UserLayout.tsx b/src/layouts/userLayout/UserLayout.tsx
@@ -0,0 +1,28 @@
+import Header from "../../layouts/userLayout/Header";
+
+export interface UserLayoutProps {
+  title?: string;
+  children?: React.ReactNode;
+}
+
+const UserLayout: React.FC<UserLayoutProps> = (props) => {
+  return (
+    <div className="relative flex h-[100vh] flex-col">
+      <Header />
+      {props.title && (
+        <header className="h-auto bg-white shadow">
+          <div className="mx-auto max-w-7xl px-4 py-6 sm:px-6 lg:px-8">
+            <h1 className="text-3xl font-bold tracking-tight text-gray-900">
+              {props.title}
+            </h1>
+          </div>
+        </header>
+      )}
+      <main className="flex w-full max-w-7xl flex-auto flex-col self-center py-6 sm:px-6 lg:px-8">
+        {props.children}
+      </main>
+    </div>
+  );
+};
+
+export default UserLayout;
diff --git a/src/pages/Problem.tsx b/src/pages/Problem.tsx
@@ -2,11 +2,11 @@ import { Button } from "@nextui-org/react";
 import CodeEditor from "../components/code-editor/CodeEditor";
 import MarkdownRender from "../components/markdown/MarkdownRender";
 import { useProblem } from "../hooks/problem";
-import Header from "../layouts/userLayout/Header";
 import JudgeVerdictTable from "../components/JudgeVerdictTable";
 import { useJudge } from "../hooks/judge";
 import { judgeVerdictListPipe } from "../pipes/judge";
 import { useEffect } from "react";
+import UserLayout from "../layouts/userLayout/UserLayout";
 
 const defaultCode = `#include <iostream>
 using namespace std;
@@ -28,47 +28,37 @@ const Problem: React.FC = () => {
   }, [setSrcLanguage]);
 
   return (
-    <div className="relative flex h-[100vh] flex-col">
-      <Header />
-      <header className="h-auto bg-white shadow">
-        <div className="mx-auto max-w-7xl px-4 py-6 sm:px-6 lg:px-8">
-          <h1 className="text-3xl font-bold tracking-tight text-gray-900">
-            {getProblemInfo()?.title}
-          </h1>
+    <UserLayout title={getProblemInfo()?.title}>
+      <div className="flex">
+        <div className="w-1/2 flex-1 ">
+          <MarkdownRender
+            content={getProblemInfo()?.description || ""}
+            rehypePlugin="rehypeKatex"
+          />
         </div>
-      </header>
-      <main className="flex w-full max-w-7xl flex-auto flex-col self-center py-6 sm:px-6 lg:px-8">
-        <div className="flex">
-          <div className="w-1/2 flex-1 ">
-            <MarkdownRender
-              content={getProblemInfo()?.description || ""}
-              rehypePlugin="rehypeKatex"
-            />
-          </div>
-          <div className="flex w-1/2 flex-col gap-4">
-            <CodeEditor
-              className="h-96 w-full overflow-hidden"
-              value={defaultCode}
-              onChange={(value: string) => {
-                setSrc(value);
-                console.log(value);
-              }}
-            />
-            <Button
-              className="relative bottom-16 right-2 self-end"
-              color="primary"
-              variant="solid"
-              onClick={runJudge}
-            >
-              Submit
-            </Button>
-          </div>
+        <div className="flex w-1/2 flex-col gap-4">
+          <CodeEditor
+            className="h-96 w-full overflow-hidden"
+            value={defaultCode}
+            onChange={(value: string) => {
+              setSrc(value);
+              console.log(value);
+            }}
+          />
+          <Button
+            className="relative bottom-16 right-2 self-end"
+            color="primary"
+            variant="solid"
+            onClick={runJudge}
+          >
+            Submit
+          </Button>
         </div>
-        {getVerdicts().length > 0 && (
-          <JudgeVerdictTable data={judgeVerdictListPipe(getVerdicts())} />
-        )}
-      </main>
-    </div>
+      </div>
+      {getVerdicts().length > 0 && (
+        <JudgeVerdictTable data={judgeVerdictListPipe(getVerdicts())} />
+      )}
+    </UserLayout>
   );
 };