PEER-249 Add Question Details UI

Signed-off-by: SeeuSim <[email protected]>

Author: SeeuSim

frontend/package.json

@@ -30,13 +30,19 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-hook-form": "^7.53.0",
+    "react-katex": "^3.0.1",
+    "react-markdown": "^9.0.1",
     "react-router-dom": "^6.26.2",
+    "rehype-katex": "^7.0.1",
+    "remark-gfm": "^4.0.0",
+    "remark-math": "^6.0.0",
     "tailwind-merge": "^2.5.2",
     "tailwindcss-animate": "^1.0.7",
     "zod": "^3.23.8"
   },
   "devDependencies": {
     "@eslint/js": "^9.9.0",
+    "@tailwindcss/typography": "^0.5.15",
     "@tanstack/eslint-plugin-query": "^5.56.1",
     "@types/node": "^22.5.5",
     "@types/react": "^18.3.3",

frontend/src/routes/questions/details.tsx

@@ -1,8 +1,13 @@
-import { Badge } from '@/components/ui/badge';
-import { Card, CardHeader, CardTitle } from '@/components/ui/card';
-import { getQuestionDetails } from '@/services/question-service';
 import { QueryClient, queryOptions, useSuspenseQuery } from '@tanstack/react-query';
+import Markdown from 'react-markdown';
 import { LoaderFunctionArgs, useLoaderData } from 'react-router-dom';
+import rehypeKatex from 'rehype-katex';
+import remarkGfm from 'remark-gfm';
+import remarkMath from 'remark-math';
+
+import { Badge } from '@/components/ui/badge';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { getQuestionDetails } from '@/services/question-service';
 
 const questionDetailsQuery = (id: number) =>
   queryOptions({
@@ -24,9 +29,11 @@ export const QuestionDetails = () => {
   return (
     <Card>
       <CardHeader>
-        <CardTitle>{details.title}</CardTitle>
-        <div className='flex flex-col gap-2'>
-          <Badge className='flex w-min grow-0'>{details.difficulty}</Badge>
+        <div className='flex flex-col gap-4'>
+          <div className='flex w-full items-center gap-4'>
+            <CardTitle className='text-2xl'>{details.title}</CardTitle>
+            <Badge className='flex w-min grow-0'>{details.difficulty}</Badge>
+          </div>
           <div className='flex flex-wrap items-center gap-1'>
             {details.topics.map((v, i) => (
               <Badge className='flex w-min grow-0 whitespace-nowrap' key={i}>
@@ -36,6 +43,15 @@ export const QuestionDetails = () => {
           </div>
         </div>
       </CardHeader>
+      <CardContent>
+        <Markdown
+          rehypePlugins={[rehypeKatex]}
+          remarkPlugins={[remarkMath, remarkGfm]}
+          className='prose prose-neutral'
+        >
+          {details.description}
+        </Markdown>
+      </CardContent>
     </Card>
   );
 };

frontend/tailwind.config.js

@@ -57,7 +57,7 @@ const config = {
       },
     },
   },
-  plugins: [require('tailwindcss-animate')],
+  plugins: [require('tailwindcss-animate'), require('@tailwindcss/typography')],
 };
 
 export default config;