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";