Merge pull request #41 from vishalmishraa/butify-problem-page

butify problem page
vishalmishraa · Sep 5, 2024 · 8f706f6 · 8f706f6
2 parents 262f5e6 + cdaed81
commit 8f706f6
Show file tree

Hide file tree

Showing 12 changed files with 455 additions and 278 deletions.
diff --git a/apps/problems/Calculate-Fibonacci/Problem.md b/apps/problems/Calculate-Fibonacci/Problem.md
@@ -1,18 +1,18 @@
-# Problem Statement: Calculate Fibonacci Number
+## Problem Statement: Calculate Fibonacci Number
 
-## Objective
+### Objective
 Write a function `calculateFibonacci` that calculates the nth Fibonacci number. A Fibonacci number is a number that appears in the Fibonacci sequence, where each number is the sum of the two preceding ones, starting from 0 and 1.
 
-## Function Signature
+### Function Signature
 `function calculateFibonacci(n)`
 
-## Input
+### Input
 - `n` (int): A non-negative integer to calculate the nth Fibonacci number.
 
-## Output
+### Output
 - Returns the nth Fibonacci number.
 
-## Examples
+### Examples
 - **Input:** `n = 5` 
    - **Output:** `5` 
    - **Explanation:** The 5th Fibonacci number is 5 (0, 1, 1, 2, 3, 5).

diff --git a/apps/web/app/(problem)/problem/[problemId]/page.tsx b/apps/web/app/(problem)/problem/[problemId]/page.tsx
@@ -1,6 +1,12 @@
 import { ProblemStatement } from "../../../../components/ProblemStatement";
 import { ProblemSubmitBar } from "../../../../components/ProblemSubmitBar";
 import { getProblem } from "../../../../controllers/problem";
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from "@/components/ui/resizable"
+
 
 export default async function ProblemPage({
   params: { problemId },
@@ -26,15 +32,36 @@ export default async function ProblemPage({
           )
         }
       </div>
-      <main className="flex-1 py-2 md:py-5 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} />
-          </div>
-        </div>
-        <ProblemSubmitBar problem={problem} />
+      <main className="flex-1 py-2 md:py-5 h-screen">
+        <ResizablePanelGroup
+          direction="horizontal"
+          className="h-full"
+        >
+
+          <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} />
+              </div>
+            </div>
+          </ResizablePanel>
+
+          <ResizableHandle className="bg-gray-700 w-2 cursor-col-resize" />
+
+
+          <ResizablePanel defaultSize={50}>
+            <div className="bg-white dark:bg-gray-900 rounded-lg shadow-md p-6 h-full">
+              <ProblemSubmitBar problem={problem} />
+            </div>
+          </ResizablePanel>
+
+
+        </ResizablePanelGroup>
       </main>
     </div>
   );
 }
+
 export const dynamic = "force-dynamic";
+
+
diff --git a/apps/web/app/globals.css b/apps/web/app/globals.css
@@ -66,4 +66,16 @@
   body {
     @apply bg-background text-foreground;
   }
+}
+
+@layer utilities {
+  /* Chrome, Safari and Opera */
+  .no-scrollbar::-webkit-scrollbar {
+    display: none;
+  }
+
+  .no-scrollbar {
+    -ms-overflow-style: none; /* IE and Edge */
+    scrollbar-width: none; /* Firefox */
+  }
 }
diff --git a/apps/web/components/ProblemStatement.tsx b/apps/web/components/ProblemStatement.tsx
@@ -12,8 +12,8 @@ interface IProblemStatement {
 
 export function ProblemStatement({ description, title, tags }: IProblemStatement) {
   return (
-    <div className="prose lg:prose-xl dark:prose-invert dark:text-gray-200">
-      <Markdown remarkPlugins={[remarkGfm]} >{description}</Markdown>
+    <div className="prose lg:prose-xl dark:prose-invert dark:text-gray-200 h-[90vh] overflow-y-auto no-scrollbar">
+      <Markdown remarkPlugins={[remarkGfm]} className={'text-xl'}>{description}</Markdown>
     </div>
   );
 }