Add Exercise Details to Popup

- Adding existing ExerciseDetail component to Exercise Detail Popub
ls1intum · Oct 22, 2024 · 6402a92 · 6402a92
1 parent f6738d3
commit 6402a92
Showing 1 changed file with 15 additions and 18 deletions.
diff --git a/playground/src/components/expert_evaluation/expert_view/side_by_side_header.tsx b/playground/src/components/expert_evaluation/expert_view/side_by_side_header.tsx
@@ -1,8 +1,9 @@
-import React, {useState} from 'react';
+import React, { useState } from 'react';
 import Popup from "@/components/expert_evaluation/expert_view/popup";
-import {Metric} from "@/model/metric";
+import { Metric } from "@/model/metric";
 import rehypeRaw from "rehype-raw";
 import ReactMarkdown from "react-markdown";
+import ExerciseDetail from "@/components/details/exercise_detail";
 
 type SideBySideHeaderProps = {
     exercise: any;
@@ -59,28 +60,24 @@ export default function SideBySideHeader({
                         <button className={buttonSecondary} onClick={openExerciseDetail}>
                             📄 Exercise Details
                         </button>
-                        <Popup isOpen={isExerciseDetailOpen} onClose={closeExerciseDetail} title="Exercise Details">
-                            <h3 className="font-semibold">{"Exercise Problem Statement"}</h3>
-                            <p>{exercise.problem_statement}</p>
-                            <h3 className="font-semibold">{"Sample Solution"}</h3>
-                            <p>{exercise.example_solution}</p>
+                        <Popup isOpen={isExerciseDetailOpen} onClose={closeExerciseDetail} title={`Exercise Details: ${exercise.title}`}>
+                            <ExerciseDetail exercise={exercise} hideDisclosure={true} openedInitially={true} />
                         </Popup>
 
                         <button className={buttonSecondary} onClick={openMetricDetail}>
                             📊 Metric Details
                         </button>
-
                         <Popup isOpen={isMetricDetailOpen} onClose={closeMetricDetail} title="Metric Details">
-                          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-                            {metrics.map((metric, index) => (
-                              <div key={index} className="border border-gray-300 rounded-md p-4">
-                                <h2 className="font-semibold mb-4">{metric.title}</h2>
-                                <ReactMarkdown rehypePlugins={[rehypeRaw]} className="prose-sm">
-                                  {metric.description}
-                                </ReactMarkdown>
-                              </div>
-                            ))}
-                          </div>
+                            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+                                {metrics.map((metric, index) => (
+                                    <div key={index} className="border border-gray-300 rounded-md p-4">
+                                        <h2 className="font-semibold mb-4">{metric.title}</h2>
+                                        <ReactMarkdown rehypePlugins={[rehypeRaw]} className="prose-sm">
+                                            {metric.description}
+                                        </ReactMarkdown>
+                                    </div>
+                                ))}
+                            </div>
                         </Popup>
 
                         <button className={buttonSecondary} onClick={openEvaluationTutorial}>