added dynamic dates to event modal

app/CalendarPage.jsx

@@ -107,29 +107,29 @@ const MeetupDay = (props) => {
 /*
 
 The goal of the calendar is to be able to click on dates and have a popup that shows our meetup details. 
-*** 1. Perhaps the modal is actually seperate and is just passed the dates from a click event?
 3. Also need to change colors
 
 */
 
 const CalendarPage = () => {
   const [openMeetupDetails, setOpenMeetupDetails] = useState(false);
+  const [selectedMeetupDate, setSelectedMeetupDate] = useState();
 
   const closeMeetupDetails = () => {
     setOpenMeetupDetails(false);
   }
 
   const checkToOpenDetails = (value, selectionState) => {
-    console.log("Test");
+    if (isFirstWednesday(value)) {
-    console.log(value);
+      setSelectedMeetupDate(value);
-    console.log(isFirstWednesday(value));
+      setOpenMeetupDetails(true);
-    isFirstWednesday(value) ? setOpenMeetupDetails(true) : null;
+    }
   }
 
   return (
     <CustomDiv>
       <Container>
-        <MeetupDetails open={openMeetupDetails} onClose={closeMeetupDetails} />
+        <MeetupDetails open={openMeetupDetails} onClose={closeMeetupDetails} date={selectedMeetupDate} />
         <Grid container spacing={3}>
           <Grid item xs={6}>
             <Box sx={{display: "flex", justifyContent: "center"}}>

components/MeetupDetails.jsx

@@ -0,0 +1,22 @@
+import { Dialog, DialogContent, DialogTitle, Typography } from '@mui/material'
+import React from 'react'
+
+const MeetupDetails = (props) => {
+    let date = new Date(props.date);
+  return (
+    <Dialog open={props.open} onClose={props.onClose}>
+        <DialogContent>
+            <DialogTitle>
+                <Typography variant='h4' align='center'>Caffeine and Coin</Typography>
+            </DialogTitle>
+            <DialogContent>
+                <Typography variant='h6'>Date & Time: {date.getMonth() + 1}/{date.getDay()}/{date.getFullYear()} at 6:00pm</Typography>
+                <Typography variant='h6'>Location: Sketchy railway tunnel on the North Side</Typography>
+                <Typography variant='h6'>Come hang out and dodge hobo knifings while discussing and learning about bitcoin!</Typography>
+            </DialogContent>
+        </DialogContent>
+    </Dialog>
+  )
+}
+
+export default MeetupDetails