feat: ready for enrolment modal

src/components/Calendar.tsx

@@ -1,4 +1,4 @@
-import { Button, Tooltip } from '@nextui-org/react';
+import { Button, Tooltip, useDisclosure } from '@nextui-org/react';
 import clsx from 'clsx';
 import { useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -16,6 +16,7 @@ import type dayjs from '../lib/dayjs';
 import type { DateTimeRange, WeekCourse, WeekCourses } from '../types/course';
 import { timeToDayjs } from '../utils/date';
 import { useDrag, useDrop } from '../utils/dnd';
+import { EnrolmentModal } from './EnrolmentModal';
 
 type DraggingCourseState = {
 	isDragging: boolean;
@@ -179,6 +180,11 @@ const CalendarHeader = ({
 const EndButtons = () => {
 	const blockHeight = useCalendarHourHeight((s) => s.height);
 
+	const {
+		isOpen: isReadyModalOpen,
+		onOpen: onReadyModalOpen,
+		onOpenChange: onReadyModalOpenChange,
+	} = useDisclosure();
 	const { copy, exportFile } = useExportCalendar();
 
 	return (
@@ -198,9 +204,18 @@ const EndButtons = () => {
 					📋
 				</Button>
 			</Tooltip>
-			<Button color="primary" size="lg" className="font-semibold">
-				Ready to Enrol 🚀
+			<Button
+				color="primary"
+				size="lg"
+				className="font-semibold"
+				onPress={onReadyModalOpen}
+			>
+				Ready for Enrolment 🚀
 			</Button>
+			<EnrolmentModal
+				isOpen={isReadyModalOpen}
+				onOpenChange={onReadyModalOpenChange}
+			/>
 			<Tooltip content="Export as file">
 				<Button
 					variant="flat"

src/components/EnrolmentModal.tsx

@@ -0,0 +1,71 @@
+import {
+	Button,
+	Card,
+	CardBody,
+	CardHeader,
+	Divider,
+	Link,
+	Modal,
+	ModalBody,
+	ModalContent,
+	ModalFooter,
+	ModalHeader,
+} from '@nextui-org/react';
+import clsx from 'clsx';
+
+import { useDetailedEnrolledCourses } from '../data/enrolled-courses';
+
+type ReadyModalProps = {
+	isOpen: boolean;
+	onOpenChange: (isOpen: boolean) => void;
+};
+export const EnrolmentModal = ({ isOpen, onOpenChange }: ReadyModalProps) => {
+	const enrolledCourses = useDetailedEnrolledCourses();
+	const isOnlyCourse = enrolledCourses.length === 1;
+
+	return (
+		<Modal
+			isOpen={isOpen}
+			onOpenChange={onOpenChange}
+			size={isOnlyCourse ? 'xs' : '2xl'}
+		>
+			<ModalContent>
+				<ModalHeader>Ready for Enrolment</ModalHeader>
+				<ModalBody className={clsx(!isOnlyCourse && 'grid grid-cols-2')}>
+					{enrolledCourses.map((c) => (
+						<Card key={c.id}>
+							<CardHeader className="flex-col text-center">
+								<p className="text-lg font-black">
+									{c.name.subject} {c.name.code}
+								</p>
+								<p className="text-sm">{c.name.title}</p>
+							</CardHeader>
+							<Divider />
+							<CardBody className="grid grid-cols-2 items-center justify-center gap-2">
+								{c.classes.map((cls) => (
+									<div
+										key={cls.typeId}
+										className="rounded-lg border *:p-1 *:text-center"
+									>
+										<div className="border-b font-bold">{cls.type}</div>
+										<div>{cls.classNumber}</div>
+									</div>
+								))}
+							</CardBody>
+						</Card>
+					))}
+				</ModalBody>
+				<ModalFooter>
+					<Button
+						href="https://access.adelaide.edu.au/"
+						as={Link}
+						showAnchorIcon
+						target="_blank"
+					>
+						Access Adelaide
+					</Button>
+				</ModalFooter>
+			</ModalContent>
+		</Modal>
+	);
+};