feat: add solution ui for questions/room

frontend/package.json

@@ -48,6 +48,7 @@
     "react-dom": "18.2.0",
     "react-hook-form": "^7.47.0",
     "react-icons": "^4.11.0",
+    "react-syntax-highlighter": "^15.5.0",
     "sanitize-html": "^2.11.0",
     "sass": "^1.69.0",
     "socket.io-client": "^4.7.2",
@@ -62,6 +63,7 @@
     "@types/lodash": "^4.14.199",
     "@types/react": "^18.2.31",
     "@types/react-dom": "^18.2.14",
+    "@types/react-syntax-highlighter": "^15.5.10",
     "@types/socket.io-client": "^3.0.0",
     "eslint-config-next": "^13.5.6"
   }

frontend/src/components/room/solution.tsx

@@ -0,0 +1,49 @@
+import { Question } from "../../types/QuestionTypes";
+import { Card } from "../ui/card";
+import { TypographyH2, TypographySmall } from "../ui/typography";
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { vscDarkPlus } from 'react-syntax-highlighter/dist/cjs/styles/prism';
+
+type SolutionProps = {
+  question: Question;
+  className?: string;
+  hasRoom?: boolean;
+};
+
+export default function Solution({
+  question,
+  className,
+  hasRoom = true,
+}: SolutionProps) {
+
+  return (
+    <Card
+      className={`m-2 ml-0 px-6 h-full ${className} overflow-y-auto overflow-x-wrap pb-4`}
+    >
+      <div className="flex flex-row items-center justify-between py-2">
+        <div className="flex items-center justify-center">
+          <TypographyH2 className="w-fit">Solution</TypographyH2>
+        </div>
+      </div>
+      <div className="pb-6 w-[43vw]">
+        <TypographySmall>
+          <SyntaxHighlighter language="python" style={vscDarkPlus} showLineNumbers wrapLines>
+            { question.solution ? question.solution : `# Sample solution code to demo syntax highlighting.
+import sys
+class Solution(object):
+    def isValidBST(self, root):
+        return self.isVaild_helper(root, -sys.maxint - 1, sys.maxint)
+
+    def isVaild_helper(self, root, minVal, maxVal):
+        if root is None:
+            return True
+        if root.val >= maxVal or root.val <= minVal:
+            return False
+        return self.isVaild_helper(root.left, minVal, root.val) and self.isVaild_helper(root.right, root.val, maxVal)
+`}
+          </SyntaxHighlighter>
+        </TypographySmall>
+      </div>
+    </Card>
+  );
+}

frontend/src/pages/questions/[id]/index.tsx

@@ -9,6 +9,7 @@ import { AuthContext } from "@/contexts/AuthContext";
 import { fetchQuestion } from "../../api/questionHandler";
 import { MrMiyagi } from "@uiball/loaders";
 import { useHistory } from "@/hooks/useHistory";
+import Solution from "@/components/room/solution";
 
 export default function Questions() {
   const router = useRouter();
@@ -83,7 +84,13 @@ export default function Questions() {
                 hasRoom={false}
               />
             </TabsContent>
-            <TabsContent value="solution">{question.solution}</TabsContent>
+            <TabsContent value="solution">
+              <Solution
+                question={question}
+                className="h-full"
+                hasRoom={false}
+              />
+            </TabsContent>
           </Tabs>
           <div className="flex-1">
             <CodeEditor

frontend/src/pages/room/[id].tsx

@@ -12,6 +12,7 @@ import { useMatch } from "@/hooks/useMatch";
 import { useEffect, useState } from "react";
 import { MrMiyagi } from "@uiball/loaders";
 import { useMatchmaking } from "@/hooks/useMatchmaking";
+import Solution from "@/components/room/solution";
 
 export default function Room() {
   const router = useRouter();
@@ -38,19 +39,6 @@ export default function Room() {
   const [question, setQuestion] = useState<Question | null>(null);
   const [loading, setLoading] = useState(true); // to be used later for loading states
 
-  // const defaultQuestion: Question = {
-  //   title: "Example Question: Two Sum",
-  //   difficulty: "Easy",
-  //   topics: ["Array", "Hash Table"],
-  //   description:
-  //     "Given an array of integers nums and an integer target, return indices of the two numbers such that they add up to target.\n\nYou may assume that each input would have exactly one solution, and you may not use the same element twice.\n\nYou can return the answer in any order.",
-  //   solution:
-  //     "var twoSum = function(nums, target) {\n    for (let i = 0; i < nums.length; i++) {\n        for (let j = i + 1; j < nums.length; j++) {\n            if (nums[i] + nums[j] === target) {\n                return [i, j];\n            }\n        }\n    }\n};",
-  //   defaultCode: { python: "var twoSum = function(nums, target) {\n\n};" },
-  //   id: "",
-  //   author: "",
-  // };
-
   const { fetchQuestion, fetchRandomQuestion } = useQuestions();
   const { updateQuestionIdInMatch } = useMatch();
   const { match, leaveMatch } = useMatchmaking();
@@ -157,7 +145,9 @@ export default function Room() {
                   </div>
                 ) : question != null && "solution" in question ? (
                   <TabsContent value="solution">
-                    {question.solution}
+                    <Solution
+                      question={question}
+                    />
                   </TabsContent>
                 ) : (
                   <div className="flex h-full justify-center items-center">