ref problem page

apps/web/app/(contest)/contest/[id]/problem/[problemId]/page.tsx

@@ -1,6 +1,6 @@
-import { ProblemStatement } from "@/components/ProblemStatement";
+import { ProblemDetail } from "@/components/problem-page/ProblemDetail";
+import { ProblemSubmitBar } from "@/components/problem-page/ProblemSubmitBar";
 import { getProblem } from "../../../../../../controllers/problem";
-import { ProblemSubmitBar } from "@/components/ProblemSubmitBar";
 
 export default async function ProblemPage({
   params: { id, problemId },
@@ -21,7 +21,7 @@ export default async function ProblemPage({
       <main className="flex-1 py-8 md:py-12 grid md:grid-cols-2 gap-8 md:gap-12">
         <div className="bg-white dark:bg-gray-900 rounded-lg shadow-md p-6">
           <div className="prose prose-stone dark:prose-invert">
-            <ProblemStatement description={problem.description} title={problem.title} tags={problem.tags}/>
+            <ProblemDetail problem={problem} />
           </div>
         </div>
         <ProblemSubmitBar contestId={id} problem={problem} />

apps/web/app/(problem)/problem/[problemId]/page.tsx

@@ -1,11 +1,11 @@
-import { ProblemStatement } from "../../../../components/ProblemStatement";
-import { ProblemSubmitBar } from "../../../../components/ProblemSubmitBar";
-import { getProblem } from "../../../../controllers/problem";
+import { ProblemDetail } from "@/components/problem-page/ProblemDetail";
 import {
   ResizableHandle,
   ResizablePanel,
   ResizablePanelGroup,
-} from "@/components/ui/resizable"
+} from "@/components/ui/resizable";
+import { ProblemSubmitBar } from "../../../../components/problem-page/ProblemSubmitBar";
+import { getProblem } from "../../../../controllers/problem";
 
 
 export default async function ProblemPage({
@@ -41,7 +41,7 @@ export default async function ProblemPage({
           <ResizablePanel defaultSize={50}>
             <div className="bg-white dark:bg-gray-900 rounded-lg shadow-md  px-6 h-ful">
               <div className="prose prose-stone dark:prose-invert h-full ">
-                <ProblemStatement description={problem.description} title={problem.title} tags={problem.tags} />
+                <ProblemDetail problem={problem} />
               </div>
             </div>
           </ResizablePanel>

apps/web/components/problem-page/ProblemDetail.tsx

@@ -0,0 +1,30 @@
+"use client"
+import { useState } from "react";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "../ui/tabs";
+import { Submissions } from "./Submissions";
+import { ProblemStatement } from "./ProblemStatement";
+
+export function ProblemDetail({ problem }: { problem: any }) {
+    const [activeTab, setActiveTab] = useState("description");
+
+    return (
+        <div className="bg-white dark:bg-gray-900 rounded-lg shadow-md p-4">
+            <div className="flex justify-between items-center mb-4">
+                <Tabs
+                    defaultValue="problem"
+                    className="rounded-md"
+                    value={activeTab}
+                    onValueChange={setActiveTab}>
+                    <TabsList className="grid grid-cols-2 w-48 gap-2">
+                        <TabsTrigger value="description">Description</TabsTrigger>
+                        <TabsTrigger value="submissions">Submissions</TabsTrigger>
+                    </TabsList>
+                </Tabs>
+            </div>
+            {activeTab === "submissions" && <Submissions problem={problem} />}
+            {activeTab === "description" && (
+                <ProblemStatement description={problem.description} tags={problem.tags} title={problem.title} />
+            )}
+        </div>
+    )
+}

apps/web/components/problem-page/ProblemSubmitBar.tsx

@@ -0,0 +1,39 @@
+"use client";
+import { LANGUAGE_MAPPING } from "@repo/common/language";
+import { useState } from "react";
+import { LanguageSelector } from "./LanguageSelector";
+import { SubmitProblem } from "./SubmitProblem";
+
+export interface IProblem {
+    id: string;
+    title: string;
+    description: string;
+    slug: string;
+    defaultCode: {
+        languageId: number;
+        code: string;
+    }[];
+};
+
+
+export const ProblemSubmitBar = ({
+    problem,
+    contestId,
+}: {
+    problem: IProblem;
+    contestId?: string;
+}) => {
+    const [language, setLanguage] = useState(
+        Object.keys(LANGUAGE_MAPPING)[0] as string
+    );
+
+    return (
+        <div className="bg-white dark:bg-gray-900 rounded-lg shadow-md ">
+            <div className="flex justify-between items-center mb-4">
+                 <LanguageSelector language={language} setLanguage={setLanguage} />
+            </div>
+                <SubmitProblem problem={problem} contestId={contestId} language={language} />
+        </div>
+    )
+};
+