Map integration

package.json

@@ -10,9 +10,15 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@react-google-maps/api": "^2.18.1",
+    "appwrite": "^11.0.0",
+    "dotenv": "^16.0.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-router-dom": "^6.11.2"
+    "react-icons": "^4.8.0",
+    "react-router-dom": "^6.11.2",
+    "react-scripts": "^5.0.1",
+    "uuid": "^9.0.0"
   },
   "devDependencies": {
     "@types/react": "^18.0.28",
@@ -24,6 +30,8 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.3.4",
     "postcss": "^8.4.23",
+    "process": "^0.11.10",
+    "react-error-overlay": "6.0.9",
     "tailwindcss": "^3.3.2",
     "vite": "^4.3.2"
   }

src/App.jsx

@@ -1,14 +1,16 @@
 import { Route, Routes } from "react-router-dom";
 import IndexPage from "./pages/IndexPage";
-import RegisterCard from "./components/header/RegisterCard";
-import LoginCard from "./components/header/LoginCard";
+import DetectLocation from "./pages/DetectLocationPage";
+import Map from "./components/Map";
 
 function App() {
   return (
     <Routes>
       <Route index element={<IndexPage />}></Route>
+      <Route exact path="/find-restaurants" element={<DetectLocation />}></Route>
+      <Route path="/your-location" element={<Map />}></Route>
     </Routes>
   );
 }
 
-export default App
+export default App;

src/components/header/IndexHeader.jsx → src/components/IndexHeader.jsx

@@ -1,4 +1,4 @@
-import logo from "../../assets/logo/logo.ico";
+import logo from "../assets/logo/logo.ico";
 
 function IndexHeader(props) {
 
@@ -16,10 +16,10 @@ function IndexHeader(props) {
 
   return (
     <header>
-      <div className="flex items-center">
+      <div className="flex items-center pt-5">
         <div className="flex items-center gap-5 ml-20">
           <img src={logo} alt="logo-img" className="h-20 w-auto" />
-          <span className=" text-4xl brand-name">WasteZero</span>
+          <span className=" text-4xl brand-name text-textColor">WasteZero</span>
         </div>
         <div className="flex items-center gap-4 ml-auto mr-20">
           <button

src/components/header/LoginCard.jsx → src/components/LoginCard.jsx

@@ -1,4 +1,6 @@
-import logo from "../../assets/logo/logo.ico";
+import { Link } from "react-router-dom";
+
+
 function LoginCard(props) {
   function handleRegisterButtonClick() {
     props.isLoginCardVisible(prevValue => {

src/components/Map.jsx

@@ -0,0 +1,39 @@
+import { GoogleMap, useJsApiLoader } from "@react-google-maps/api";
+import { useCallback, useState } from "react";
+
+function Map() {
+
+    const { isLoaded } = useJsApiLoader({
+      id: "google-map-script",
+      googleMapsApiKey: import.meta.env.REACT_APP_GOOGLE_MAP_API_KEY,
+    });
+    const [map, setMap] = useState(null)
+
+    const onLoad = useCallback((map) => {
+        const bounds = new window.google.maps.LatLngBounds(map.center);
+        map.fitBounds(bounds);
+
+        setMap(map)
+    }, [])
+
+    const onUnmount = useCallback(function callback(map) {
+        setMap(null)
+    }, [])
+
+    return isLoaded ? (
+      <GoogleMap
+        mapContainerStyle={{ width: "100vw", height: "100vh" }}
+        center={{ lat: 26.862471, lng: 75.762413 }}
+        zoom={10}
+        onLoad={onLoad}
+        onUnmount={onUnmount}
+      >
+        {/* Child components, such as markers, info windows, etc. */}
+        <></>
+      </GoogleMap>
+    ) : (
+      <div>Loading...</div>
+    );
+}
+
+export default Map;

src/components/header/RegisterCard.jsx → src/components/RegisterCard.jsx

@@ -1,4 +1,5 @@
-import logo from "../../assets/logo/logo.ico";
+import { useState } from "react";
+import logo from "../assets/logo/logo.ico";
 function RegisterCard(props) {
 
   function handleLoginButtonClick() {

src/components/SearchBar.jsx

@@ -0,0 +1,19 @@
+import { useState } from "react";
+import { FaSearch } from "react-icons/fa";
+import {TbCurrentLocation} from "react-icons/tb"
+import { Link } from "react-router-dom";
+
+function SearchBar() {
+    return (
+        <div className="bg-white w-full rounded-xl h-12 flex items-center px-4 shadow-xl">
+            <FaSearch className="text-primary text-xl" />
+            <input
+                placeholder="Type to Search..."
+                className="bg-transparent border-none text-xl h-full w-full ml-2.5 focus:outline-none">    
+            </input>
+            <Link to="/your-location"><TbCurrentLocation className="text-primary text-2xl" /></Link>
+        </div>
+    );
+}
+
+export default SearchBar; 

src/components/SearchResult.jsx

@@ -0,0 +1,7 @@
+function SearchResult() {
+    return (
+        <div className="px-5 py-2.5 hover:bg-gray-300"></div>
+    );
+}
+
+export default SearchResult;

src/components/SearchResultsList.jsx

@@ -0,0 +1,11 @@
+import SearchResult from "./SearchResult";
+
+function SearchResultList() {
+    return (
+      <div className="w-full bg-white flex flex-col rounded-xl mt-4 max-h-80 overflow-y-scroll shadow-l">
+        <SearchResult />
+      </div>
+    );
+}
+
+export default SearchResultList;

src/index.css

@@ -1,6 +1,17 @@
+.index-page{
+  background-size: cover;
+  background-position: center;
+}
+
 .brand-name{
     font-family: 'Mogra', cursive;
 }
+
+.index-slogan{
+    font-family: 'Mogra', cursive;
+    text-align: center;
+    color: #f8f7f7;
+}
 .blur-background{
   position: fixed;
   top: 0;
@@ -17,13 +28,15 @@
   top: 50%;
   left: 50%;
   transform: translate(-50%,-50%);
-  background-color: white;
+  background-color: #f8f7f7;
   padding: 20px;
   border-radius: 8px;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
   z-index: 2;
 }
 
+
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;

src/pages/DetectLocationPage.jsx

@@ -0,0 +1,15 @@
+import SearchBar from "../components/SearchBar";
+import SearchResultList from "../components/SearchResultsList";
+
+function DetectLocation() {
+    return (
+        <div className="bg-secondary w-screen h-screen"> 
+            <div className="w-2/5 flex min-w-200 flex-col m-auto items-center pt-80">
+                <SearchBar />
+                <SearchResultList />
+            </div>
+        </div>
+    )
+}
+
+export default DetectLocation;

src/pages/IndexPage.jsx

@@ -1,19 +1,25 @@
-
-import IndexHeader from "../components/header/IndexHeader";
-import RegisterCard from "../components/header/RegisterCard";
-import LoginCard from "../components/header/LoginCard";
+import IndexHeader from "../components/IndexHeader";
+import RegisterCard from "../components/RegisterCard";
+import LoginCard from "../components/LoginCard";
+import backgroundImage from "../assets/images/indexPage.jpg";
 import { useState } from "react";
 
 function IndexPage() {
   const [loginCardVisible, setLoginCardVisible] = useState(false);
   const [registerCardVisible, setRegisterCardVisible] = useState(false);
 
   return (
-    <div className="relative">
+    <div
+      className="relative index-page w-screen h-screen"
+      style={{ backgroundImage: `url(${backgroundImage})` }}
+    >
       <IndexHeader
         isLoginCardVisible={setLoginCardVisible}
         isRegisterCardVisible={setRegisterCardVisible}
       />
+      <p className="mt-40 text-6xl index-slogan">
+        Together, we can end food waste.
+      </p>
       {loginCardVisible && (
         <LoginCard
           isLoginCardVisible={setLoginCardVisible}

src/pages/NearByRestaurants.jsx

@@ -0,0 +1,9 @@
+function NearByRestaurants() {
+    return (
+        <div>
+            <Maps />
+        </div>
+    )
+}
+
+export default NearByRestaurants;

tailwind.config.js

@@ -6,7 +6,7 @@ export default {
       colors: {
         primary: "#eee258",
         secondary: "#f8f7f7",
-        textColor: "##080708",
+        textColor: "#080708",
         background: "#fbf4f7",
         accent: "#979196",
         hoverColor: "#d6cc57",