forked from expertiza/reimplementation-front-end
/
CourseDetails.tsx
48 lines (41 loc) · 1.55 KB
/
CourseDetails.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
import React from 'react';
import { Modal, Button } from 'react-bootstrap';
import { ICourseResponse as ICourse } from "../../utils/interfaces";
/**
* @author Aniket Singh Shaktawat, on March, 2024
* @author Pankhi Saini on March, 2024
* @author Siddharth Shah on March, 2024
*/
// Defining the props structure for the CourseDetails component
interface CourseDetailsProps {
show: boolean;
onHide: () => void;
course: ICourse | null;
}
// The CourseDetails functional component, receiving props defined above
const CourseDetails: React.FC<CourseDetailsProps> = ({ show, onHide, course }) => {
return (
// Modal component from react-bootstrap to display course details in a dialog
<Modal centered show={show} onHide={onHide} size="lg" backdrop="static">
<Modal.Header closeButton>
<Modal.Title>Course Details</Modal.Title>
</Modal.Header>
<Modal.Body>
{course && (
<div>
<h4>{course.name}</h4>
<p>Institution: {course.institution?.name}</p>
<p>Instructor: {course.instructor?.name}</p>
<p>Course Information: {course.info}</p>
<p>Course Directory: {course.directory_path}</p>
<p>Course Visibility: {course.private ? "Private" : "Public"}</p>
</div>
)}
</Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick={onHide}>Close</Button>
</Modal.Footer>
</Modal>
);
};
export default CourseDetails;