49-dashboard map details (WIP)

package.json

@@ -34,17 +34,20 @@
     "dayjs": "^1.11.9",
     "eslint": "8.44.0",
     "eslint-config-next": "13.4.9",
+    "leaflet": "^1.9.4",
     "next": "13.4.9",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-hook-form": "^7.45.2",
+    "react-leaflet": "^4.2.1",
     "typescript": "5.1.6",
     "yup": "^1.2.0"
   },
   "devDependencies": {
     "@commitlint/cli": "^17.6.6",
     "@commitlint/config-conventional": "^17.6.6",
     "@svgr/webpack": "^8.0.1",
+    "@types/leaflet": "^1.9.4",
     "cz-conventional-changelog": "^3.3.0",
     "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-import": "^2.27.5",

src/components/DashboardMap/DashboardMap.styled.ts

@@ -0,0 +1,39 @@
+import styled from '@emotion/styled'
+import { Box, Typography } from '@mui/material'
+
+export const MapWrapper = styled(Box)(() => ({
+  width: '100%',
+  aspectRatio: 2,
+  height: 500,
+  // position: 'relative',
+  overflow: 'hidden',
+  borderRadius: 10,
+  marginTop: 20
+}))
+
+export const CenterPopupTitle = styled(Typography)(() => ({
+  fontSize: 14,
+  fontWeight: 600,
+  textDecoration: 'underline'
+}))
+
+export const CenterTitle = styled(Typography)(({ theme }) => ({
+  fontSize: 12,
+  fontWeight: 600,
+  textDecoration: 'underline',
+  color: theme.palette.boulder
+}))
+
+export const TestimonialWrapper = styled(Box)(() => ({
+  width: '100%',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  gap: 20
+}))
+
+export const CenterPopupText = styled(Typography)(({ theme }) => ({
+  fontSize: 10,
+  fontWeight: 500,
+  color: theme.palette.boulder
+}))

src/components/DashboardMap/DashboardMap.tsx

@@ -0,0 +1,154 @@
+import {
+  MapContainer as Map,
+  Marker,
+  Popup,
+  TileLayer,
+  Tooltip
+} from 'react-leaflet'
+import Icon from '@mui/icons-material/LocationOn'
+import {
+  CenterPopupText,
+  CenterPopupTitle,
+  CenterTitle,
+  MapWrapper,
+  TestimonialWrapper
+} from './DashboardMap.styled'
+import 'leaflet/dist/leaflet.css'
+import { Box } from '@mui/material'
+import TestimonialPopup from '../TestimonialPopup/TestimonialPopup'
+
+export default function DashboardMap() {
+  return (
+    <MapWrapper>
+      <Map
+        center={[40.505, 100.09]}
+        zoom={2}
+        style={{ height: '100vh', width: '100wh' }}
+      >
+        <TileLayer
+          attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
+          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+        />
+        {DUMMY_DATA.map((marker) => (
+          <Marker
+            key={marker.id}
+            position={[marker.position.lat, marker.position.lng]}
+          >
+            <Popup>
+              <CenterPopup title={marker.name} centers={marker.centers} />
+            </Popup>
+            <Tooltip>{marker.name}</Tooltip>
+          </Marker>
+        ))}
+      </Map>
+    </MapWrapper>
+  )
+}
+
+const DUMMY_DATA = [
+  {
+    id: 'm1',
+    name: 'Maximilian',
+    places: 3,
+    country: 'USA',
+    position: {
+      lat: 40.712776,
+      lng: -74.005974
+    },
+    centers: [
+      {
+        name: 'New York',
+        testimonials: [
+          {
+            name: 'John Doe',
+            link: 'https://www.youtube.com/embed/mPZkdNFkNps'
+          },
+          {
+            name: 'John Doe',
+            link: 'https://www.youtube.com/embed/mPZkdNFkNps'
+          }
+        ]
+      },
+      {
+        name: 'New York',
+        testimonials: [
+          {
+            name: 'John Doe',
+            link: 'https://www.youtube.com/embed/9bZkp7q19f0'
+          },
+          {
+            name: 'John Doe',
+            link: 'https://www.youtube.com/embed/9bZkp7q19f0'
+          }
+        ]
+      }
+    ]
+  },
+  {
+    id: 'm2',
+    name: 'Manuel',
+    places: 1,
+    country: 'Italy',
+    position: {
+      lat: 41.902782,
+      lng: 12.496366
+    },
+    centers: [
+      {
+        name: 'New York',
+        testimonials: [
+          {
+            name: 'John Doe',
+            link: 'https://www.youtube.com/embed/mPZkdNFkNps'
+          }
+        ]
+      },
+      {
+        name: 'New York',
+        testimonials: [
+          {
+            name: 'John Doe',
+            link: 'https://www.youtube.com/embed/mPZkdNFkNps'
+          }
+        ]
+      }
+    ]
+  }
+]
+
+function CenterPopup({
+  title,
+  centers
+}: {
+  title: string
+  centers: {
+    name: string
+    testimonials: {
+      name: string
+      link: string
+    }[]
+  }[]
+}) {
+  return (
+    <Box>
+      <CenterPopupTitle>{title}</CenterPopupTitle>
+
+      {centers.map((center) => (
+        <Box key={center.name}>
+          <CenterTitle>{center.name}</CenterTitle>
+
+          {center.testimonials.map((testimonial) => (
+            <TestimonialWrapper key={testimonial.name}>
+              <CenterPopupText>{testimonial.name}</CenterPopupText>
+
+              <TestimonialPopup
+                title={testimonial.name}
+                link={testimonial.link}
+              />
+            </TestimonialWrapper>
+          ))}
+        </Box>
+      ))}
+    </Box>
+  )
+}