adding pagination layout

packages/frontend/components/WhatsNewModal/Fall2024ReleaseModalContent.tsx

@@ -0,0 +1,72 @@
+import {
+  Box,
+  Button,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  Text,
+} from "@chakra-ui/react";
+import { ModalBodyPagination } from "./ModalBodyPagination";
+
+interface ModalContentProps {
+  onClose: () => void;
+}
+
+export const Fall2024ReleaseModalContent: React.FC<ModalContentProps> = ({
+  onClose,
+}) => {
+  const featurePages: React.ReactNode[] = [
+    <FeaturePage1 />,
+    <FeaturePage2 />,
+    <FeaturePage3 />,
+  ];
+
+  return (
+    <ModalContent>
+      <ModalHeader
+        color="primary.blue.dark.main"
+        borderBottom="1px"
+        borderColor="neutral.200"
+      >
+        <Text>Latest Release v26.09.24</Text>
+      </ModalHeader>
+      <ModalBodyPagination pages={featurePages} />
+
+      <ModalFooter alignContent="center" justifyContent="center">
+        <Button
+          variant="solid"
+          borderRadius="md"
+          width="sm"
+          colorScheme="red"
+          onClick={onClose}
+        >
+          Looks Good!
+        </Button>
+      </ModalFooter>
+    </ModalContent>
+  );
+};
+
+const FeaturePage1: React.FC = () => {
+  return (
+    <Box>
+      <Text>Feature 1</Text>
+    </Box>
+  );
+};
+
+const FeaturePage2: React.FC = () => {
+  return (
+    <Box>
+      <Text>Feature 2</Text>
+    </Box>
+  );
+};
+
+const FeaturePage3: React.FC = () => {
+  return (
+    <Box>
+      <Text>Feature 3</Text>
+    </Box>
+  );
+};

packages/frontend/components/WhatsNewModal/ModalBodyPagination.tsx

@@ -0,0 +1,77 @@
+import { ChevronLeftIcon, ChevronRightIcon } from "@chakra-ui/icons";
+import { Box, IconButton, ModalBody, Text } from "@chakra-ui/react";
+import { useState } from "react";
+
+interface ModalBodyPaginationProps {
+  pages: React.ReactNode[];
+}
+
+export const ModalBodyPagination: React.FC<ModalBodyPaginationProps> = ({
+  pages,
+}) => {
+  const [currentPageIndex, setCurrentPageIndex] = useState(0);
+
+  const totalPages = pages.length;
+
+  function goToNextPage() {
+    setCurrentPageIndex((prev) => Math.min(prev + 1, totalPages));
+  }
+
+  function goToPreviousPage() {
+    setCurrentPageIndex((prev) => Math.max(prev - 1, 0));
+  }
+
+  function setCurrentPage(index: number) {
+    setCurrentPageIndex(index);
+  }
+
+  return (
+    <ModalBody justifyContent="center" alignContent="center">
+      {pages[currentPageIndex]}
+      <Pagination
+        goToPreviousPage={goToPreviousPage}
+        goToNextPage={goToNextPage}
+        currentPageIndex={currentPageIndex}
+        totalPages={totalPages}
+      />
+    </ModalBody>
+  );
+};
+
+interface PaginationProps {
+  goToPreviousPage: () => void;
+  goToNextPage: () => void;
+  currentPageIndex: number;
+  totalPages: number;
+}
+
+const Pagination: React.FC<PaginationProps> = ({
+  goToPreviousPage,
+  goToNextPage,
+  currentPageIndex,
+  totalPages,
+}) => {
+  return (
+    <Box display="flex" alignItems="center" justifyContent="center">
+      <IconButton
+        colorScheme="primary.blue.dark.400"
+        variant="ghost"
+        icon={<ChevronLeftIcon />}
+        onClick={goToPreviousPage}
+        isDisabled={currentPageIndex === 0}
+        aria-label="Previous page"
+      />
+      <Text textColor="primary.blue.dark.400">
+        {currentPageIndex + 1} / {totalPages}
+      </Text>
+      <IconButton
+        colorScheme="primary.blue.dark.400"
+        variant="ghost"
+        icon={<ChevronRightIcon />}
+        onClick={goToNextPage}
+        isDisabled={currentPageIndex >= totalPages - 1}
+        aria-label="Next page"
+      />
+    </Box>
+  );
+};

packages/frontend/components/WhatsNewModal/WhatsNewModal.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import { Modal, ModalOverlay } from "@chakra-ui/react";
+
+interface WhatsNewModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  children: React.ReactNode;
+}
+
+export const WhatsNewModal: React.FC<WhatsNewModalProps> = ({
+  isOpen,
+  onClose,
+  children,
+}) => {
+  return (
+    <Modal isOpen={isOpen} onClose={onClose} size="4xl" isCentered>
+      <ModalOverlay />
+      {children}
+    </Modal>
+  );
+};

packages/frontend/pages/home.tsx

@@ -50,8 +50,9 @@ import {
   getPreReqWarnings,
 } from "../utils/plan/preAndCoReqCheck";
 import { IsGuestContext } from "./_app";
-import { WhatsNewPopUp } from "../components/FullPageModal/FullPageModal";
+import { WhatsNewModal } from "../components/WhatsNewModal/WhatsNewModal";
 import Cookies from "universal-cookie";
+import { Fall2024ReleaseModalContent } from "../components/WhatsNewModal/Fall2024ReleaseModalContent";
 
 // Algorithm to decide which droppable the course is currently over (if any).
 // See https://docs.dndkit.com/api-documentation/context-provider/collision-detection-algorithms for more info.
@@ -347,7 +348,11 @@ const HomePage: NextPage = () => {
         ) : null}
       </DragOverlay>
 
-      <WhatsNewPopUp isOpen={isOpen} onClose={handleClose} />
+      <WhatsNewModal
+        isOpen={isOpen}
+        onClose={handleClose}
+        children={<Fall2024ReleaseModalContent onClose={handleClose} />}
+      />
     </DndContext>
   );
 };