From ad2814897874f6e0de2e30523618db4d9cf1f77b Mon Sep 17 00:00:00 2001
From: tinan272 <mnguyen354@gatech.edu>
Date: Sun, 25 Feb 2024 14:53:13 -0500
Subject: [PATCH] popup window inside map

---
 .../app/components/GoogleMap.jsx              |   9 +-
 coffee_and_coding/app/components/PopUp.jsx    |  32 ++--
 coffee_and_coding/app/page.jsx                | 172 ++++++++++--------
 3 files changed, 122 insertions(+), 91 deletions(-)

diff --git a/coffee_and_coding/app/components/GoogleMap.jsx b/coffee_and_coding/app/components/GoogleMap.jsx
index 3582e25c..bfebc55b 100644
--- a/coffee_and_coding/app/components/GoogleMap.jsx
+++ b/coffee_and_coding/app/components/GoogleMap.jsx
@@ -1,5 +1,5 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import React from "react";
+import PropTypes from "prop-types";
 
 export const GoogleMap = ({ searchValue }) => {
     return (
@@ -13,11 +13,10 @@ export const GoogleMap = ({ searchValue }) => {
                 referrerPolicy="no-referrer-when-downgrade"
                 src={`https://www.google.com/maps/embed/v1/search?key=${process.env.NEXT_PUBLIC_API_Key}&q=${searchValue}`}
                 allowFullScreen
-            >
-            </iframe>
+            ></iframe>
         </div>
     );
-}
+};
 
 GoogleMap.propTypes = {
     searchValue: PropTypes.string.isRequired,
diff --git a/coffee_and_coding/app/components/PopUp.jsx b/coffee_and_coding/app/components/PopUp.jsx
index 7c9baff4..6eb35a9d 100644
--- a/coffee_and_coding/app/components/PopUp.jsx
+++ b/coffee_and_coding/app/components/PopUp.jsx
@@ -1,18 +1,24 @@
 "use client";
-import React, { useState } from 'react';
-import Box from '@mui/material/Box';
-import Switch from '@mui/material/Switch';
-import Paper from '@mui/material/Paper';
-import Slide from '@mui/material/Slide';
-import FormControlLabel from '@mui/material/FormControlLabel';
-import {sizing} from '@mui/system';
+import React, { useState } from "react";
+import Box from "@mui/material/Box";
+import Paper from "@mui/material/Paper";
+import { Typography } from "@mui/material";
 
+//https://mui.com/material-ui/transitions/
 export const PopUp = () => {
     return (
-        <div>
-            <Paper sx={{ m: 1,height: 420 }} elevation={4}>
-
+        <Box>
+            <Paper
+                sx={{ m: 1, height: 420, position: "relative" }}
+                elevation={4}
+            >
+                <Typography variant="h3" gutterBottom>
+                    Place Name
+                </Typography>
+                <Typography variant="subtitle1" gutterBottom>
+                    Ratings...
+                </Typography>
             </Paper>
-        </div>
-    )
-}
\ No newline at end of file
+        </Box>
+    );
+};
diff --git a/coffee_and_coding/app/page.jsx b/coffee_and_coding/app/page.jsx
index 4e981de3..186a684b 100644
--- a/coffee_and_coding/app/page.jsx
+++ b/coffee_and_coding/app/page.jsx
@@ -1,79 +1,105 @@
 "use client";
-import React, { useState } from 'react';
-import Image from 'next/image';
-import Grid from '@mui/material/Grid';
-import Box from '@mui/material/Box';
-import { Search } from './components/Search.jsx';
-import { GoogleMap } from './components/GoogleMap.jsx';
-import { PopUp } from './components/PopUp.jsx';
+import React, { useState } from "react";
+import Image from "next/image";
+import Grid from "@mui/material/Grid";
+import Box from "@mui/material/Box";
+import { Search } from "./components/Search.jsx";
+import { GoogleMap } from "./components/GoogleMap.jsx";
+import { PopUp } from "./components/PopUp.jsx";
+import FormControlLabel from "@mui/material/FormControlLabel";
+import Switch from "@mui/material/Switch";
+import Slide from "@mui/material/Slide";
+import Fade from "@mui/material/Fade";
 
 export default function Home() {
-	const [searchValue, setSearchValue] = useState("Atlanta, GA");
+    const [searchValue, setSearchValue] = useState("Atlanta, GA");
 
-	const handleEnterPress = (inputValue) => {
-		console.log(inputValue);
-		setSearchValue(inputValue);
-	};
-  
-  return (
-    <main className="flex min-h-screen flex-col items-center justify-between p-24">
-      <div className="z-10 max-w-5xl w-full items-center justify-between font-mono text-sm lg:flex">
-        <p className="fixed left-0 top-0 flex w-full justify-center border-b border-gray-300 bg-gradient-to-b from-zinc-200 pb-6 pt-8 backdrop-blur-2xl dark:border-neutral-800 dark:bg-zinc-800/30 dark:from-inherit lg:static lg:w-auto  lg:rounded-xl lg:border lg:bg-gray-200 lg:p-4 lg:dark:bg-zinc-800/30">
-          Coffee and Coding
-          <code className="font-mono font-bold">app/page.tsx</code>
-        </p>
-        <div className="fixed bottom-0 left-0 flex h-48 w-full items-end justify-center bg-gradient-to-t from-white via-white dark:from-black dark:via-black lg:static lg:h-auto lg:w-auto lg:bg-none">
-          <a
-            className="pointer-events-none flex place-items-center gap-2 p-8 lg:pointer-events-auto lg:p-0"
-            href="https://vercel.com?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            By{" "}
-            <Image
-              src="/vercel.svg"
-              alt="Vercel Logo"
-              className="dark:invert"
-              width={100}
-              height={24}
-              priority
-            />
-          </a>
-        </div>
-      </div>
+    const handleEnterPress = (inputValue) => {
+        setSearchValue(inputValue);
+    };
 
-      <div className="relative flex place-items-center before:absolute before:h-[300px] before:w-full sm:before:w-[480px] before:-translate-x-1/2 before:rounded-full before:bg-gradient-radial before:from-white before:to-transparent before:blur-2xl before:content-[''] after:absolute after:-z-20 after:h-[180px] after:w-full sm:after:w-[240px] after:translate-x-1/3 after:bg-gradient-conic after:from-sky-200 after:via-blue-200 after:blur-2xl after:content-[''] before:dark:bg-gradient-to-br before:dark:from-transparent before:dark:to-blue-700 before:dark:opacity-10 after:dark:from-sky-900 after:dark:via-[#0141ff] after:dark:opacity-40 before:lg:h-[360px] z-[-1]">
-        <Image
-          className="relative dark:drop-shadow-[0_0_0.3rem_#ffffff70] dark:invert"
-          src="/next.svg"
-          alt="Next.js Logo"
-          width={180}
-          height={37}
-          priority
-        />
-      </div>
-      <Box 
-        sx={{
-          flexGrow: 1,
-          padding: 5,
-        }}
-      > 
-        <Grid container spacing={2}>
-          <Grid item xs={4}>
-            <Grid container spacing={1}>
-              <Grid item xs={12}>
-		  	        <Search onEnterPress={handleEnterPress} />
-              </Grid>
-              <Grid item xs={12} style={{ height: '100%' }}>
-		  	        <PopUp />
-              </Grid>
-            </Grid>
-          </Grid>
-          <Grid item xs={8}>
-		  	    <GoogleMap searchValue={searchValue} />
-          </Grid>
-        </Grid>
-      </Box>
-    </main>
-  );
+    const [checked, setChecked] = useState(false);
+
+    const handleChange = () => {
+        setChecked((prev) => !prev);
+    };
+
+    return (
+        <main className="flex min-h-screen flex-col items-center justify-between p-24">
+            <div className="z-10 max-w-5xl w-full items-center justify-between font-mono text-sm lg:flex">
+                <p className="fixed left-0 top-0 flex w-full justify-center border-b border-gray-300 bg-gradient-to-b from-zinc-200 pb-6 pt-8 backdrop-blur-2xl dark:border-neutral-800 dark:bg-zinc-800/30 dark:from-inherit lg:static lg:w-auto  lg:rounded-xl lg:border lg:bg-gray-200 lg:p-4 lg:dark:bg-zinc-800/30">
+                    Coffee and Coding
+                    <code className="font-mono font-bold">app/page.jsx</code>
+                </p>
+                <div className="fixed bottom-0 left-0 flex h-48 w-full items-end justify-center bg-gradient-to-t from-white via-white dark:from-black dark:via-black lg:static lg:h-auto lg:w-auto lg:bg-none">
+                    <a
+                        className="pointer-events-none flex place-items-center gap-2 p-8 lg:pointer-events-auto lg:p-0"
+                        href="https://vercel.com?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                    >
+                        By{" "}
+                        <Image
+                            src="/vercel.svg"
+                            alt="Vercel Logo"
+                            className="dark:invert"
+                            width={100}
+                            height={24}
+                            priority
+                        />
+                    </a>
+                </div>
+            </div>
+
+            <div className="relative flex place-items-center before:absolute before:h-[300px] before:w-full sm:before:w-[480px] before:-translate-x-1/2 before:rounded-full before:bg-gradient-radial before:from-white before:to-transparent before:blur-2xl before:content-[''] after:absolute after:-z-20 after:h-[180px] after:w-full sm:after:w-[240px] after:translate-x-1/3 after:bg-gradient-conic after:from-sky-200 after:via-blue-200 after:blur-2xl after:content-[''] before:dark:bg-gradient-to-br before:dark:from-transparent before:dark:to-blue-700 before:dark:opacity-10 after:dark:from-sky-900 after:dark:via-[#0141ff] after:dark:opacity-40 before:lg:h-[360px] z-[-1]">
+                <Image
+                    className="relative dark:drop-shadow-[0_0_0.3rem_#ffffff70] dark:invert"
+                    src="/next.svg"
+                    alt="Next.js Logo"
+                    width={180}
+                    height={37}
+                    priority
+                />
+            </div>
+            <Box
+                sx={{
+                    flexGrow: 1,
+                    padding: 5,
+                }}
+            >
+                <Grid container spacing={2}>
+                    <Grid item xs={4}>
+                        <Grid container spacing={1}>
+                            <Grid item xs={12}>
+                                <Search onEnterPress={handleEnterPress} />
+                            </Grid>
+                            <Grid item xs={12} style={{ height: "100%" }}>
+                                <FormControlLabel
+                                    control={
+                                        <Switch
+                                            checked={checked}
+                                            onChange={handleChange}
+                                        />
+                                    }
+                                    label="Show from target"
+                                />
+                            </Grid>
+                        </Grid>
+                    </Grid>
+                    <Grid item xs={8}>
+                        <Box position={"absolute"}>
+                            <GoogleMap searchValue={searchValue} />
+                        </Box>
+                        <Box sx={{ display: "p" }}>
+                            <Fade in={checked}>
+                                <div>
+                                    <PopUp />
+                                </div>
+                            </Fade>
+                        </Box>
+                    </Grid>
+                </Grid>
+            </Box>
+        </main>
+    );
 }