1 files changed, 71 insertions, 0 deletions
diff --git a/client/src/components/CalendarDialog.tsx b/client/src/components/CalendarDialog.tsx
new file mode 100644
index 0000000..cff5512
--- /dev/null
+++ b/client/src/components/CalendarDialog.tsx
@@ -0,0 +1,71 @@
+import React from 'react';
+import {
+  Dialog,
+  DialogContent,
+  DialogContentText,
+  DialogTitle,
+  IconButton,
+  useTheme,
+} from '@mui/material';
+import CloseIcon from '@mui/icons-material/Close';
+import { useAppDispatch, useAppSelector } from '../hooks';
+import { hideDialog, selectUIState } from '../slices/uiSlice';
+
+function CalendarDialog() {
+  const dispatch = useAppDispatch();
+  const { dialogOpen } = useAppSelector(selectUIState);
+  const theme = useTheme();
+
+  const handleClose = () => {
+    dispatch(hideDialog());
+  };
+
+  return (
+    <Dialog
+      open={dialogOpen}
+      onClose={handleClose}
+      PaperProps={{ sx: { borderRadius: 2 } }}
+    >
+      <DialogTitle sx={{ textAlign: 'center' }}>
+        Calendar Invitation
+      </DialogTitle>
+      <IconButton
+        aria-label="close"
+        onClick={handleClose}
+        sx={(theme) => ({
+          position: 'absolute',
+          right: 8,
+          top: 8,
+          color: theme.palette.grey[500],
+        })}
+      >
+        <CloseIcon />
+      </IconButton>
+      <DialogContent
+        sx={{
+          height: '100%',
+          width: '100%',
+          display: 'flex',
+          flexDirection: 'column',
+          justifyContent: 'center',
+          alignItems: 'center',
+          gap: 4,
+        }}
+      >
+        <DialogContentText color="inherit">
+          Scan the QR code or click the link below to add the calendar invite to
+          your device.
+        </DialogContentText>
+        <img src="/madison-michael-qr-code.png" />
+        <a
+          href="/madison-michael-wedding.ics"
+          style={{ color: theme.palette.primary.main }}
+        >
+          Add to calendar
+        </a>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+export default CalendarDialog;