diff --git a/client/src/pages/LocationPage/LeftColumnDetails.tsx b/client/src/pages/LocationPage/LeftColumnDetails.tsx index 3a8521c..04430db 100644 --- a/client/src/pages/LocationPage/LeftColumnDetails.tsx +++ b/client/src/pages/LocationPage/LeftColumnDetails.tsx @@ -7,6 +7,8 @@ import ChatOutlinedIcon from '@mui/icons-material/ChatOutlined'; import CameraAltOutlinedIcon from '@mui/icons-material/CameraAltOutlined'; import ScreenShareOutlinedIcon from '@mui/icons-material/ScreenShareOutlined'; import type { LocationType } from '../../types/LocationType'; +import SharePopup from './SharePopup'; +import { useState } from 'react'; function LeftColumnDetais({ locationInfo, @@ -15,6 +17,14 @@ function LeftColumnDetais({ locationInfo: LocationType | null; id: string; }) { + const [isOpen, setIsOpen] = useState(false); + const handleOpen = () => { + setIsOpen(true); + }; + const handleClose = () => { + setIsOpen(false); + }; + return (
@@ -34,24 +44,31 @@ function LeftColumnDetais({
- + +
+
diff --git a/client/src/pages/LocationPage/SharePopup.scss b/client/src/pages/LocationPage/SharePopup.scss new file mode 100644 index 0000000..341fb80 --- /dev/null +++ b/client/src/pages/LocationPage/SharePopup.scss @@ -0,0 +1,81 @@ +#share-popup-container { + padding: 0; + height: 100%; + width: 100%; + box-sizing: border-box; + text-align: center; + pointer-events: none; + outline: none; +} + +#share-popup-inner-container { + display: inline-block; + height: 100%; + width: 100%; + max-width: 490px; + max-height: 600px; + border-radius: 0.5em; + box-sizing: border-box; + background: #fff; + overflow: hidden; + transform: translate(0); + pointer-events: all; + padding: 1em; +} + +#share-popup-inner { + display: flex; + flex-direction: column; + vertical-align: middle; + height: 100%; + width: 100%; +} +#share-popup-title { + font-size: 2.5em; + font-weight: 1000; + font-family: 'Poppins', 'Helvetica Neue', Helvetica, Arial, sans-serif; +} + +#share-popup-page-inner { + float: left; + box-sizing: border-box; + width: 100%; + max-width: 400px; + text-align: left; +} +#share-popup-page-container { + display: table; + margin-top: 4em; + margin-bottom: 10em; +} + +#share-popup-page-inner p { + margin-bottom: 2em; +} + +%share-popup-textinput { + display: block; + margin: 0 0 1em; + padding: 0.4em 0.8em; + border: 1px solid #999; + border-radius: 0.3em; + width: 100%; + font-size: 1em; + box-sizing: border-box; +} + +%share-popup-textinput:focus { + outline: none; + border-color: #2592ff; + box-shadow: 0 0 3px rgba(52, 160, 255, 0.5); +} + +#share-popup-page-inner input { + @extend %share-popup-textinput; +} + +#share-popup-page-inner textarea { + @extend %share-popup-textinput; + resize: vertical; + height: 7em; +} diff --git a/client/src/pages/LocationPage/SharePopup.tsx b/client/src/pages/LocationPage/SharePopup.tsx new file mode 100644 index 0000000..08ac3df --- /dev/null +++ b/client/src/pages/LocationPage/SharePopup.tsx @@ -0,0 +1,105 @@ +import Modal from '@mui/material/Modal'; +import CloseButton from '../../components/CloseButton'; +import { Container } from '@mui/material'; +import './SharePopup.scss'; +import { useForm } from 'react-hook-form'; +import { useEffect } from 'react'; +import MailIcon from '@mui/icons-material/Mail'; +import { Button } from '@mui/material'; +import { useState } from 'react'; + +function SharePopup({ + onClose, + isOpen, +}: { + onClose: (event: {}) => void; + isOpen: boolean; +}) { + const { register, setValue } = useForm<{ + link: string; + recipient: string; + body: string; + }>(); + useEffect(() => { + setValue('link', window.location.href); + }, [setValue]); + + const [email, setEmail] = useState(''); + const [body, setBody] = useState(''); + + const submitForm = (event: React.FormEvent) => { + event.preventDefault(); + window.location.href = + 'mailto:' + + email + + '?subject=Shared Campus Map&body= Map Link: ' + + window.location.href + + '%0D%0A' + + body; + }; + + return ( + +
+
+ { + onClose({}); + }} + /> + +
Share Maps
+ +
+
+ + + + + setEmail(e.target.value)} + /> + + +