Modal and styling added

client/src/components/modals/AlumniModal/AlumniModal.tsx

@@ -0,0 +1,47 @@
+import React from "react";
+
+interface Alum {
+  name: string;
+  company: string;
+  email: string;
+  linkedIn?: string;
+  campus?: string;
+  cohort: string | number;
+  jobTitle?: string;
+  industry?: string;
+  cities: string[];
+}
+
+interface ModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  alum: Alum | null;
+}
+
+const Modal: React.FC<ModalProps> = ({ isOpen, onClose, alum }) => {
+  if (!isOpen || !alum) return null;
+
+  return (
+    <div className="fixed inset-0 z-50 bg-black bg-opacity-75 flex items-center justify-center p-4">
+      <div className="bg-gradient-to-r from-gray-700 via-gray-800 to-gray-900 p-6 rounded-lg max-w-lg w-full m-4 shadow-xl">
+        <h2 className="text-2xl font-bold text-white">{alum.name}</h2>
+        <p className="text-white">Company: {alum.company}</p>
+        <p className="text-white">Email: {alum.email}</p>
+        <p className="text-white">LinkedIn: {alum.linkedIn || "N/A"}</p>
+        <p className="text-white">Campus: {alum.campus || "N/A"}</p>
+        <p className="text-white">Cohort: {alum.cohort}</p>
+        <p className="text-white">Job Title: {alum.jobTitle || "N/A"}</p>
+        <p className="text-white">Industry: {alum.industry || "N/A"}</p>
+        <p className="text-white">Cities: {alum.cities.join(", ")}</p>
+        <button
+          onClick={onClose}
+          className="mt-4 bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded focus:outline-none"
+        >
+          Close
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default Modal;

client/src/pages/DirectoryPage/DirectoryPage.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from "react";
 import { useAppDispatch, useAppSelector } from "../../app/hooks";
 import { fetchAlumni } from "../../features/alumni/alumniSlice";
+import Modal from "../../components/modals/AlumniModal/AlumniModal";
 
 const DirectoryPage = (): JSX.Element => {
   const dispatch = useAppDispatch();
@@ -9,6 +10,8 @@ const DirectoryPage = (): JSX.Element => {
   );
   const [nameSearch, setNameSearch] = useState("");
   const [companySearch, setCompanySearch] = useState("");
+  const [modalOpen, setModalOpen] = useState(false);
+  const [selectedAlum, setSelectedAlum] = useState(null);
 
   useEffect(() => {
     dispatch(fetchAlumni({ page, name: nameSearch, company: companySearch }));
@@ -38,6 +41,16 @@ const DirectoryPage = (): JSX.Element => {
     }
   };
 
+  const handleAlumClick = (alum) => {
+    setSelectedAlum(alum);
+    setModalOpen(true);
+  };
+
+  const handleCloseModal = () => {
+    setModalOpen(false);
+    setSelectedAlum(null);
+  };
+
   return (
     <div className="min-h-screen bg-gray-900 text-white flex flex-col items-center justify-start pt-20 p-4">
       <div className="sticky mt-20 z-10 bg-gray-900 w-full text-center py-4">
@@ -70,7 +83,11 @@ const DirectoryPage = (): JSX.Element => {
             <p>Loading...</p>
           ) : (
             alumni.map((alum) => (
-              <div key={alum._id} className="grid grid-cols-3 text-center py-2">
+              <div
+                key={alum._id}
+                className="grid grid-cols-3 text-center py-2 cursor-pointer"
+                onClick={() => handleAlumClick(alum)}
+              >
                 <div>{alum.name}</div>
                 <div>{alum.company}</div>
                 <div>{alum.email}</div>
@@ -87,6 +104,11 @@ const DirectoryPage = (): JSX.Element => {
           </button>
         </div>
       </div>
+      <Modal
+        isOpen={modalOpen}
+        onClose={handleCloseModal}
+        alum={selectedAlum}
+      />
     </div>
   );
 };