feat(map in message): Added map in message of invite

src/components/chat/MapBar.tsx

@@ -0,0 +1,32 @@
+import { Flex } from "@chakra-ui/react";
+import { MapContainer, Marker, TileLayer } from "react-leaflet";
+import SimpleMarkerBar from "./SimpleMarkerBar";
+import MarkerClusterGroup from "@christopherpickering/react-leaflet-markercluster";
+import "leaflet/dist/leaflet.css";
+
+type MapBarProps = {
+  lat: string;
+  lon: string;
+  name: string;
+  align: "left" | "right";
+};
+
+export default function MapBar({ lat, lon, name, align }: MapBarProps) {
+  return (
+    <Flex justifyContent={align}>
+      <MapContainer
+        center={[Number(lat), Number(lon)]}
+        zoom={13}
+        minZoom={6}
+        zoomControl={false}
+        style={{ width: "50%", height: "20rem" }}
+      >
+        <TileLayer
+          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
+          attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+        />
+        <SimpleMarkerBar lat={lat} lon={lon} name={name} />
+      </MapContainer>
+    </Flex>
+  );
+}

src/components/chat/MessageMap.tsx

@@ -1,15 +1,33 @@
-import {Text} from '@chakra-ui/react';
+import { Box, Text } from "@chakra-ui/react";
+
+import dynamic from "next/dynamic";
+
+const MapBarWithNoSSR = dynamic(() => import("./MapBar"), {
+  ssr: false,
+});
 
 type Props = {
-  align: 'left' | 'right'
+  align: "left" | "right";
   point: {
-    lon: string
+    lon: string;
-    lat: string
+    lat: string;
-    name: string
+    name: string;
-  }
+  };
-}
+};
 
-export default function MessageMap({align, point}: Props) {
+export default function MessageMap({ align, point }: Props) {
-  const {lon, lat, name} = point;
+  const { lon, lat, name } = point;
-  return <Text align={align}>{lon}, {lat}, {name}</Text>;
+  return (
-}
+    <Box>
+      <MapBarWithNoSSR
+        lon={lon}
+        lat={lat}
+        name={name}
+        align={align}
+      ></MapBarWithNoSSR>
+      <Text align={align}>
+        {lon}, {lat}, {name}
+      </Text>
+    </Box>
+  );
+}

src/components/chat/SimpleMarkerBar.tsx

@@ -0,0 +1,34 @@
+import { Marker, Popup } from "react-leaflet";
+import { Box, Text } from "@chakra-ui/react";
+import L from "leaflet";
+
+type SimpleMarkerBarProps = {
+  lat: string;
+  lon: string;
+  name: string;
+};
+
+export default function SimpleMarkerBar({
+  lat,
+  lon,
+  name,
+}: SimpleMarkerBarProps) {
+  const barIcon = new L.Icon({
+    iconUrl: "drink_cocktail.png",
+    iconSize: [35, 35],
+    popupAnchor: [0, -5],
+    backgroundColor: "purple",
+  });
+
+  return (
+    <Marker icon={barIcon} position={[Number(lat), Number(lon)]}>
+      <Popup>
+        <Box align={"center"}>
+          <Text fontSize={"1rem"} fontWeight={"bold"} align={"center"}>
+            Vous avez été invité au : {name}
+          </Text>
+        </Box>
+      </Popup>
+    </Marker>
+  );
+}

src/components/layout/map/MapComponent.tsx

@@ -1,8 +1,7 @@
-import { MapContainer, TileLayer, Marker, useMapEvents } from "react-leaflet";
+import { MapContainer, TileLayer, Marker } from "react-leaflet";
-import { Flex, Text, useToast } from "@chakra-ui/react";
+import { Text, useToast } from "@chakra-ui/react";
 import MarkerClusterGroup from "@christopherpickering/react-leaflet-markercluster";
 import L from "leaflet";
-import { memo, useState } from "react";
 
 import "@christopherpickering/react-leaflet-markercluster/dist/styles.min.css";