Improved the way a teacher views the assignments

src/dashboards/Teacher.tsx

@@ -44,6 +44,7 @@ import Button from "@/components/Low/Button";
 import clsx from "clsx";
 import ProgressBar from "@/components/Low/ProgressBar";
 import AssignmentCreator from "./AssignmentCreator";
+import AssignmentView from "./AssignmentView";
 
 interface Props {
 	user: User;
@@ -150,24 +151,14 @@ export default function TeacherDashboard({user}: Props) {
 
 		return (
 			<>
-				<Modal
+				<AssignmentView
 					isOpen={!!selectedAssignment && !isCreatingAssignment}
-					onClose={() => setSelectedAssignment(undefined)}
-					title={selectedAssignment?.name}>
-					<div className="mt-4 flex flex-col w-full">
-						<ProgressBar
-							color="purple"
-							label={`${selectedAssignment?.results.length}/${selectedAssignment?.assignees.length}`}
-							className="h-6"
-							textClassName={
-								(selectedAssignment?.results.length || 0) / (selectedAssignment?.assignees.length || 1) < 0.5
-									? "!text-mti-gray-dim font-light"
-									: "text-white"
-							}
-							percentage={((selectedAssignment?.results.length || 0) / (selectedAssignment?.assignees.length || 1)) * 100}
-						/>
-					</div>
-				</Modal>
+					onClose={() => {
+						setSelectedAssignment(undefined);
+						setIsCreatingAssignment(false);
+					}}
+					assignment={selectedAssignment}
+				/>
 				<AssignmentCreator
 					assignment={selectedAssignment}
 					groups={groups.filter((x) => x.admin === user.id || x.participants.includes(user.id))}