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({
- }
- sx={{ textTransform: 'none', fontSize: '1em' }}
+
- Add Photo
-
+ }
+ sx={{ textTransform: 'none', fontSize: '1em' }}
+ >
+ Add Photo
+
+
}
sx={{ textTransform: 'none', fontSize: '1em' }}
>
Share
+
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