diff options
Diffstat (limited to 'client/src/components/CalendarDialog.tsx')
-rw-r--r-- | client/src/components/CalendarDialog.tsx | 71 |
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; |