+
{
setCoords({ lat: e.center.lat, lng: e.center.lng });
setBounds({ ne: e.marginBounds.ne, sw: e.marginBounds.sw });
}}
onChildClick={(child) => setChildClicked(child)}
>
- {places.length && places.map((place, i) => (
-
- {!matches
- ?
- : (
-
- {place.name}
- 
-
+ {places.length > 0 &&
+ places.map((place, i) => (
+
+ {!matches ? (
+
+ ) : (
+
+
+ {place.name}
+
+
+
)}
-
-
-
+ {/* Weather icon */} {/* ✅ Fixed comment syntax */}
+
+
);
diff --git a/src/components/Map/styles.js b/src/components/Map/styles.js
index 46f3da6..41ce265 100644
--- a/src/components/Map/styles.js
+++ b/src/components/Map/styles.js
@@ -1,16 +1,49 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { styled } from "@mui/material/styles";
-export default makeStyles(() => ({
- paper: {
- padding: '10px', display: 'flex', flexDirection: 'column', justifyContent: 'center', width: '100px',
- },
- mapContainer: {
- height: '85vh', width: '100%',
- },
- markerContainer: {
- position: 'absolute', transform: 'translate(-50%, -50%)', zIndex: 1, '&:hover': { zIndex: 2 },
- },
- pointer: {
- cursor: 'pointer',
- },
+export const MapContainer = styled("div")({
+ height: "85vh",
+ width: "100%",
+});
+
+export const MarkerContainer = styled("div")({
+ position: "absolute",
+ transform: "translate(-50%, -50%)",
+ "&:hover": { zIndex: 1 },
+});
+
+export const Paper = styled("div")(({ theme }) => ({
+ padding: "10px",
+ display: "flex",
+ flexDirection: "column",
+ justifyContent: "center",
+ width: "100px",
}));
+
+export const Pointer = styled("img")({
+ cursor: "pointer",
+});
+
+// import { makeStyles } from "@mui/styles";
+
+// export default makeStyles(() => ({
+// paper: {
+// padding: "10px",
+// display: "flex",
+// flexDirection: "column",
+// justifyContent: "center",
+// width: "100px",
+// },
+// mapContainer: {
+// height: "85vh",
+// width: "100%",
+// },
+// markerContainer: {
+// position: "absolute",
+// transform: "translate(-50%, -50%)",
+// zIndex: 1,
+// "&:hover": { zIndex: 2 },
+// },
+// pointer: {
+// cursor: "pointer",
+// },
+// }));
diff --git a/src/components/PlaceDetails/PlaceDetails.js b/src/components/PlaceDetails/PlaceDetails.js
index 48440e6..eb4f5ed 100644
--- a/src/components/PlaceDetails/PlaceDetails.js
+++ b/src/components/PlaceDetails/PlaceDetails.js
@@ -1,27 +1,44 @@
-import React from 'react';
-import { Box, Typography, Button, Card, CardMedia, CardContent, CardActions, Chip } from '@material-ui/core';
-import LocationOnIcon from '@material-ui/icons/LocationOn';
-import PhoneIcon from '@material-ui/icons/Phone';
-import Rating from '@material-ui/lab/Rating';
+import React from "react";
+import {
+ Box,
+ Typography,
+ Button,
+ Card,
+ CardMedia,
+ CardContent,
+ CardActions,
+ Chip,
+} from "@mui/material"; // Changed from '@material-ui/core'
+import LocationOnIcon from "@mui/icons-material/LocationOn"; // Changed from '@material-ui/icons/LocationOn'
+import PhoneIcon from "@mui/icons-material/Phone"; // Changed from '@material-ui/icons/Phone'
+import { Rating } from "@mui/material"; // Changed from '@material-ui/lab/Rating'
-import useStyles from './styles.js';
+import { Spacing, Subtitle } from "./styles.js";
const PlaceDetails = ({ place, selected, refProp }) => {
- if (selected) refProp?.current?.scrollIntoView({ behavior: 'smooth', block: 'start' });
- const classes = useStyles();
+ if (selected)
+ refProp?.current?.scrollIntoView({ behavior: "smooth", block: "start" });
return (
- {place.name}
+
+ {place.name}
+
- {place.num_reviews} review{place.num_reviews > 1 && 's'}
+
+ {place.num_reviews} review{place.num_reviews > 1 && "s"}
+
Price
@@ -36,30 +53,51 @@ const PlaceDetails = ({ place, selected, refProp }) => {
{place?.awards?.map((award) => (
-
- 
- {award.display_name}
+
+
+
+ {award.display_name}
+
))}
{place?.cuisine?.map(({ name }) => (
-
+
))}
{place.address && (
-
- {place.address}
+
+
+ {place.address}
)}
{place.phone && (
-
+
{place.phone}
)}
-
diff --git a/src/components/PlaceDetails/styles.js b/src/components/PlaceDetails/styles.js
index 66c0eec..7d1f20a 100644
--- a/src/components/PlaceDetails/styles.js
+++ b/src/components/PlaceDetails/styles.js
@@ -1,13 +1,37 @@
-import { makeStyles } from '@material-ui/core/styles';
-
-export default makeStyles(() => ({
- chip: {
- margin: '5px 5px 5px 0',
- },
- subtitle: {
- display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginTop: '10px',
- },
- spacing: {
- display: 'flex', alignItems: 'center', justifyContent: 'space-between',
- },
+import { styled } from "@mui/material/styles";
+
+export const Chip = styled("div")(({ theme }) => ({
+ margin: "5px 5px 5px 0",
+}));
+
+export const Subtitle = styled("div")(({ theme }) => ({
+ display: "flex",
+ alignItems: "center",
+ justifyContent: "space-between",
+ marginTop: "10px",
}));
+
+export const Spacing = styled("div")(({ theme }) => ({
+ display: "flex",
+ alignItems: "center",
+ justifyContent: "space-between",
+}));
+
+// import { makeStyles } from "@mui/styles";
+
+// export default makeStyles(() => ({
+// chip: {
+// margin: "5px 5px 5px 0",
+// },
+// subtitle: {
+// display: "flex",
+// alignItems: "center",
+// justifyContent: "space-between",
+// marginTop: "10px",
+// },
+// spacing: {
+// display: "flex",
+// alignItems: "center",
+// justifyContent: "space-between",
+// },
+// }));
diff --git a/src/index.css b/src/index.css
new file mode 100644
index 0000000..0018389
--- /dev/null
+++ b/src/index.css
@@ -0,0 +1,8 @@
+body {
+ margin: 0;
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+ "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+ sans-serif;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+}
diff --git a/src/index.js b/src/index.js
index 7d06674..ec34fcd 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,6 +1,18 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
+import React from "react";
+import ReactDOM from "react-dom/client";
+import { ThemeProvider, createTheme } from "@mui/material/styles";
+import CssBaseline from "@mui/material/CssBaseline";
+import "./index.css";
+import App from "./App";
-import App from './app.js';
+const theme = createTheme();
-ReactDOM.render(, document.getElementById('root'));
+const root = ReactDOM.createRoot(document.getElementById("root"));
+root.render(
+
+
+
+
+
+
+);
diff --git a/src/mapStyles.js b/src/mapStyles.js
index ebb8084..cf85795 100644
--- a/src/mapStyles.js
+++ b/src/mapStyles.js
@@ -1,101 +1,54 @@
-export default [
+const mapStyles = [
{
- featureType: 'all',
- elementType: 'all',
- stylers: [
- {
- saturation: '32',
- },
- {
- lightness: '-3',
- },
- {
- visibility: 'on',
- },
- {
- weight: '1.18',
- },
- ],
+ featureType: "water",
+ elementType: "geometry",
+ stylers: [{ color: "#e9e9e9" }, { lightness: 17 }],
},
{
- featureType: 'administrative',
- elementType: 'labels',
- stylers: [
- {
- visibility: 'on',
- },
- ],
+ featureType: "landscape",
+ elementType: "geometry",
+ stylers: [{ color: "#f5f5f5" }, { lightness: 20 }],
},
{
- featureType: 'landscape',
- elementType: 'labels',
- stylers: [
- {
- visibility: 'off',
- },
- ],
+ featureType: "road.highway",
+ elementType: "geometry.fill",
+ stylers: [{ color: "#ffffff" }, { lightness: 17 }],
},
{
- featureType: 'landscape.man_made',
- elementType: 'all',
- stylers: [
- {
- saturation: '-70',
- },
- {
- lightness: '14',
- },
- ],
+ featureType: "road.highway",
+ elementType: "geometry.stroke",
+ stylers: [{ color: "#ffffff" }, { lightness: 29 }, { weight: 0.2 }],
},
{
- featureType: 'poi',
- elementType: 'labels',
- stylers: [
- {
- visibility: 'off',
- },
- ],
+ featureType: "road.arterial",
+ elementType: "geometry",
+ stylers: [{ color: "#ffffff" }, { lightness: 18 }],
},
{
- featureType: 'road',
- elementType: 'labels',
- stylers: [
- {
- visibility: 'off',
- },
- ],
+ featureType: "road.local",
+ elementType: "geometry",
+ stylers: [{ color: "#ffffff" }, { lightness: 16 }],
},
{
- featureType: 'transit',
- elementType: 'labels',
- stylers: [
- {
- visibility: 'off',
- },
- ],
+ featureType: "poi",
+ elementType: "geometry",
+ stylers: [{ color: "#f5f5f5" }, { lightness: 21 }],
},
{
- featureType: 'water',
- elementType: 'all',
- stylers: [
- {
- saturation: '100',
- },
- {
- lightness: '-14',
- },
- ],
+ featureType: "poi.park",
+ elementType: "geometry",
+ stylers: [{ color: "#dedede" }, { lightness: 21 }],
},
{
- featureType: 'water',
- elementType: 'labels',
- stylers: [
- {
- visibility: 'off',
- },
- {
- lightness: '12',
- },
- ],
+ featureType: "administrative",
+ elementType: "geometry.fill",
+ stylers: [{ color: "#fefefe" }, { lightness: 20 }],
+ },
+ {
+ featureType: "administrative",
+ elementType: "geometry.stroke",
+ stylers: [{ color: "#fefefe" }, { lightness: 17 }, { weight: 1.2 }],
},
];
+
+export default mapStyles;
diff --git a/src/setupProxy.js b/src/setupProxy.js
new file mode 100644
index 0000000..b876ef1
--- /dev/null
+++ b/src/setupProxy.js
@@ -0,0 +1,29 @@
+const { createProxyMiddleware } = require("http-proxy-middleware");
+
+module.exports = function (app) {
+ app.use(
+ "/api/travel-advisor",
+ createProxyMiddleware({
+ target: "https://travel-advisor.p.rapidapi.com",
+ changeOrigin: true,
+ pathRewrite: { "^/api/travel-advisor": "" },
+ headers: {
+ "X-RapidAPI-Key": "9bbb604f6fmsh2e668933ded04d2p1dda3ejsnb8e28e1ab995",
+ "X-RapidAPI-Host": "travel-advisor.p.rapidapi.com",
+ },
+ })
+ );
+
+ app.use(
+ "/api/weather",
+ createProxyMiddleware({
+ target: "https://community-open-weather-map.p.rapidapi.com",
+ changeOrigin: true,
+ pathRewrite: { "^/api/weather": "" },
+ headers: {
+ "x-rapidapi-key": "9bbb604f6fmsh2e668933ded04d2p1dda3ejsnb8e28e1ab995",
+ "x-rapidapi-host": "community-open-weather-map.p.rapidapi.com",
+ },
+ })
+ );
+};