reuse question description component

Author: Kurtyjlee

peerprep-fe/src/components/dialogs/ActionDialog.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactElement } from 'react';
 import {
   Dialog,
   DialogContent,
@@ -16,6 +16,7 @@ type Props = {
   description: string;
   callback?: () => void;
   callbackTitle?: string;
+  children?: ReactElement;
 };
 
 const ActionDialog = ({
@@ -26,18 +27,23 @@ const ActionDialog = ({
   description,
   callback,
   callbackTitle,
+  children,
 }: Props) => {
   return (
     <Dialog open={isOpen} onOpenChange={onClose}>
-      <DialogContent className="bg-black">
+      <DialogContent className="max-h-[80%] overflow-auto bg-black">
         <DialogHeader>
           <DialogTitle>{title}</DialogTitle>
           <DialogDescription>{subtitle}</DialogDescription>
         </DialogHeader>
-        <div className="mt-4">
-          <h3 className="mb-2 text-lg font-semibold">Description:</h3>
-          <p>{description}</p>
-        </div>
+        {children ? (
+          children
+        ) : (
+          <div className="mt-4">
+            <h3 className="mb-2 text-lg font-semibold">Description:</h3>
+            <p>{description}</p>
+          </div>
+        )}
         <div className="mt-6 flex justify-end">
           <Button variant="secondary" onClick={callback}>
             {callbackTitle}

peerprep-fe/src/components/problems/ProblemDescriptionPanel.tsx

@@ -5,21 +5,29 @@ import { Button } from '../ui/button';
 type Props = {
   problem: Problem;
   resetQuestion: () => void; // replace with something more generic
+  hasHeader?: boolean;
 };
 
-const ProblemDescriptionPanel = ({ problem, resetQuestion }: Props) => {
+const ProblemDescriptionPanel = ({
+  problem,
+  resetQuestion,
+  hasHeader = true,
+}: Props) => {
   return (
     <>
-      <div className="flex justify-between">
-        <h2 className="mb-4 text-2xl font-bold">{problem.title}</h2>
-        <Button
-          variant="outline"
-          className="border-gray-700 bg-gray-800"
-          onClick={() => resetQuestion()}
-        >
-          Reset
-        </Button>
-      </div>
+      {hasHeader && (
+        <div className="flex justify-between">
+          <h2 className="mb-4 text-2xl font-bold">{problem.title}</h2>
+          <Button
+            variant="outline"
+            className="border-gray-700 bg-gray-800"
+            onClick={() => resetQuestion()}
+          >
+            Reset
+          </Button>
+        </div>
+      )}
+
       <p className="mb-4">{problem.description}</p>
       {problem.examples.map((example, index) => (
         <React.Fragment key={index}>

peerprep-fe/src/components/problems/ProblemRow.tsx

@@ -10,6 +10,7 @@ import InformationDialog from '../dialogs/InformationDialog';
 import ActionDialog from '../dialogs/ActionDialog';
 import { useRouter } from 'next/navigation';
 import { axiosClient } from '@/network/axiosClient';
+import ProblemDescriptionPanel from './ProblemDescriptionPanel';
 
 function ProblemStatus({ status }: { status: string }) {
   if (status === 'solved') {
@@ -156,7 +157,14 @@ export default function ProblemRow({
         description={problem.description}
         callback={handleMatch}
         callbackTitle="Match"
-      />
+      >
+        <ProblemDescriptionPanel
+          problem={problem}
+          resetQuestion={() => {}}
+          hasHeader={false}
+        />
+      </ActionDialog>
+
       {/* Dialog for deleting question */}
       <ActionDialog
         isOpen={isDeleteDialogOpen}