diff --git a/src/components/chat/MapBar.tsx b/src/components/chat/MapBar.tsx
new file mode 100644
index 0000000..3919338
--- /dev/null
+++ b/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 (
+
+
+
+
+
+
+ );
+}
diff --git a/src/components/chat/MessageMap.tsx b/src/components/chat/MessageMap.tsx
index a2eae00..6dbbbad 100644
--- a/src/components/chat/MessageMap.tsx
+++ b/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
- lat: string
- name: string
- }
-}
+ lon: string;
+ lat: string;
+ name: string;
+ };
+};
-export default function MessageMap({align, point}: Props) {
- const {lon, lat, name} = point;
- return {lon}, {lat}, {name};
-}
\ No newline at end of file
+export default function MessageMap({ align, point }: Props) {
+ const { lon, lat, name } = point;
+ return (
+
+
+
+ {lon}, {lat}, {name}
+
+
+ );
+}
diff --git a/src/components/chat/SimpleMarkerBar.tsx b/src/components/chat/SimpleMarkerBar.tsx
new file mode 100644
index 0000000..c00212d
--- /dev/null
+++ b/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 (
+
+
+
+
+ Vous avez été invité au : {name}
+
+
+
+
+ );
+}
diff --git a/src/components/layout/map/MapComponent.tsx b/src/components/layout/map/MapComponent.tsx
index 85ffe47..f2a0bac 100644
--- a/src/components/layout/map/MapComponent.tsx
+++ b/src/components/layout/map/MapComponent.tsx
@@ -1,8 +1,7 @@
-import { MapContainer, TileLayer, Marker, useMapEvents } from "react-leaflet";
-import { Flex, Text, useToast } from "@chakra-ui/react";
+import { MapContainer, TileLayer, Marker } from "react-leaflet";
+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";