diff --git a/src/components/MapPage/LetterInfoContainer/LetterInfoContainer.tsx b/src/components/MapPage/LetterInfoContainer/LetterInfoContainer.tsx index 9f57970a..cbdf421d 100644 --- a/src/components/MapPage/LetterInfoContainer/LetterInfoContainer.tsx +++ b/src/components/MapPage/LetterInfoContainer/LetterInfoContainer.tsx @@ -1,3 +1,4 @@ +import { BottleLetter } from '@/components/Common/BottleLetter/BottleLetter'; import { NavLink } from 'react-router-dom'; type LetterInfoContainerProps = { @@ -8,6 +9,7 @@ type LetterInfoContainerProps = { daysLeft: number; lat: number; lot: number; + label: string; }; export const LetterInfoContainer = ({ @@ -17,15 +19,17 @@ export const LetterInfoContainer = ({ date, daysLeft, lat, - lot + lot, + label }: LetterInfoContainerProps) => { const limitDistance = parseFloat(distance) <= 15; + const Letter = { label }; return (
-
- Bottle +
+
diff --git a/src/components/MapPage/Maplibre/MaplibreWithSearch.tsx b/src/components/MapPage/Maplibre/MaplibreWithSearch.tsx index 91e77ef8..401d9116 100644 --- a/src/components/MapPage/Maplibre/MaplibreWithSearch.tsx +++ b/src/components/MapPage/Maplibre/MaplibreWithSearch.tsx @@ -13,6 +13,7 @@ import { useCurrentLocation } from '@/hooks/useCurrentLocation'; import { useNearbyLetters } from '@/hooks/useNearbyLetters'; import { NearbyLettersResponseType } from '@/types/letter'; import { useLocationState } from '@/hooks/useLocationState'; +import { BottleLetter } from '@/components/Common/BottleLetter/BottleLetter'; type MaplibreWithSearchProps = { onFocus: () => void; @@ -92,16 +93,18 @@ export const MaplibreWithSearch = ({ latitude={letter.latitude} >
{ e.stopPropagation(); toggleSelectedLetter(letter); }} > - +
+ +
+
) diff --git a/src/pages/Map/MapExplorerPage.tsx b/src/pages/Map/MapExplorerPage.tsx index 05b0b5b8..8e3303b6 100644 --- a/src/pages/Map/MapExplorerPage.tsx +++ b/src/pages/Map/MapExplorerPage.tsx @@ -105,6 +105,7 @@ export const MapExplorerPage = () => { daysLeft={daysLeft} lat={selectedLetter.latitude} lot={selectedLetter.longitude} + label={selectedLetter.label} /> ) : (