feat: initial submit page

src/pages/pages.tsx

@@ -4,3 +4,4 @@ export { ErrorPage } from "./error-page";
 export { HomePage } from "./home";
 export { ProblemPage } from "./problem";
 export { SearchPage } from "./search";
+export { SubmitPage } from "./submit";

src/pages/submit.tsx

@@ -0,0 +1,59 @@
+import { useState } from "react";
+import { Button, Col, Row, Select, Space } from "antd";
+import { PlayCircleOutlined } from "@ant-design/icons";
+
+import Editor from "../components/editor.tsx";
+import ProblemDetails from "../components/problem-details.tsx";
+import { useLoaderData } from "react-router-dom";
+import { DetailsResp } from "../api/problem.ts";
+
+const AvailLang = [
+    { value: "cpp", label: "C++" },
+    { value: "c", label: "C" },
+    { value: "python", label: "Python" },
+];
+
+const LangToMode: { [lang: string]: string } = {
+    cpp: "c_cpp",
+    c: "c_cpp",
+    python: "python",
+};
+
+export function SubmitPage() {
+    const details = useLoaderData() as DetailsResp;
+
+    const langOptions = AvailLang.filter((l) =>
+        details.context.Languages.some((x) => x.Lang === l.value),
+    );
+
+    const [lang, setLang] = useState(langOptions[0].value);
+
+    const funcMenu = (
+        <Space wrap>
+            <Select
+                placeholder="Select a person"
+                optionFilterProp="children"
+                value={lang}
+                onChange={setLang}
+                options={langOptions}
+            />
+            <Button icon={<PlayCircleOutlined />}>Submit</Button>
+        </Space>
+    );
+
+    const codeEditor = Editor({
+        mode: LangToMode[lang],
+        onChange: console.log,
+    });
+
+    const MiscPanel = <ProblemDetails action={funcMenu} />;
+
+    return (
+        <>
+            <Row justify="center" align="top" gutter={[16, 16]}>
+                <Col span={18}>{codeEditor}</Col>
+                <Col span={6}>{MiscPanel}</Col>
+            </Row>
+        </>
+    );
+}

src/routes.tsx

@@ -1,7 +1,11 @@
-import { HomePage } from "./pages/home.tsx";
+import {
+    HomePage,
+    ProblemPage,
+    SearchPage,
+    SubmitPage,
+} from "./pages/pages.tsx";
 
-import { ProblemLoader, ProblemPage } from "./pages/pages.tsx";
-import { SearchPage } from "./pages/pages.tsx";
+import { ProblemLoader } from "./api/loader.ts";
 
 const RouteConfigs = [
     {
@@ -19,7 +23,8 @@ const RouteConfigs = [
     },
     {
         path: "problem/:id/submit",
-        element: <div>problem submit</div>,
+        element: <SubmitPage />,
+        loader: ProblemLoader,
     },
 ];