58 lines
1.5 KiB
TypeScript
58 lines
1.5 KiB
TypeScript
"use client"
|
|
import { APIProvider } from "@vis.gl/react-google-maps"
|
|
import { useState } from "react"
|
|
import { useIntl } from "react-intl"
|
|
|
|
import { selectHotel } from "@/constants/routes/hotelReservation"
|
|
|
|
import { CloseIcon } from "@/components/Icons"
|
|
import InteractiveMap from "@/components/Maps/InteractiveMap"
|
|
import Button from "@/components/TempDesignSystem/Button"
|
|
import Link from "@/components/TempDesignSystem/Link"
|
|
import useLang from "@/hooks/useLang"
|
|
|
|
import HotelListing from "./HotelListing"
|
|
|
|
import styles from "./selectHotelMap.module.css"
|
|
|
|
import { SelectHotelMapProps } from "@/types/components/hotelReservation/selectHotel/map"
|
|
|
|
export default function SelectHotelMap({
|
|
apiKey,
|
|
coordinates,
|
|
pointsOfInterest,
|
|
mapId,
|
|
}: SelectHotelMapProps) {
|
|
const lang = useLang()
|
|
const intl = useIntl()
|
|
const [activePoi, setActivePoi] = useState<string | null>(null)
|
|
|
|
const closeButton = (
|
|
<Button
|
|
asChild
|
|
intent="inverted"
|
|
size="small"
|
|
theme="base"
|
|
className={styles.closeButton}
|
|
>
|
|
<Link href={selectHotel[lang]} keepSearchParams color="burgundy">
|
|
<CloseIcon color="burgundy" />
|
|
{intl.formatMessage({ id: "Close the map" })}
|
|
</Link>
|
|
</Button>
|
|
)
|
|
return (
|
|
<APIProvider apiKey={apiKey}>
|
|
<HotelListing />
|
|
<InteractiveMap
|
|
closeButton={closeButton}
|
|
coordinates={coordinates}
|
|
pointsOfInterest={pointsOfInterest}
|
|
activePoi={activePoi}
|
|
onActivePoiChange={setActivePoi}
|
|
mapId={mapId}
|
|
/>
|
|
</APIProvider>
|
|
)
|
|
}
|