48 lines
1.2 KiB
TypeScript
48 lines
1.2 KiB
TypeScript
import {
|
|
AdvancedMarker,
|
|
AdvancedMarkerAnchorPoint,
|
|
} from "@vis.gl/react-google-maps"
|
|
|
|
import Body from "@/components/TempDesignSystem/Text/Body"
|
|
|
|
import HotelMarker from "../../Markers/Hotel"
|
|
|
|
import styles from "./hotelListingMapContent.module.css"
|
|
|
|
import { HotelPin } from "@/types/components/hotelReservation/selectHotel/map"
|
|
|
|
export default function HotelListingMapContent({
|
|
activeHotelPin,
|
|
hotelPins,
|
|
}: {
|
|
activeHotelPin?: HotelPin["name"] | null
|
|
hotelPins: HotelPin[]
|
|
}) {
|
|
return (
|
|
<div>
|
|
{hotelPins.map((pin) => (
|
|
<AdvancedMarker
|
|
key={pin.name}
|
|
className={styles.advancedMarker}
|
|
position={pin.coordinates}
|
|
anchorPoint={AdvancedMarkerAnchorPoint.CENTER}
|
|
zIndex={activeHotelPin === pin.name ? 2 : 0}
|
|
>
|
|
<span
|
|
className={`${styles.pin} ${activeHotelPin === pin.name ? styles.active : ""}`}
|
|
>
|
|
<span className={styles.pinIcon}>
|
|
<HotelMarker width={16} />
|
|
</span>
|
|
<Body asChild>
|
|
<span>
|
|
{pin.price} {pin.currency}
|
|
</span>
|
|
</Body>
|
|
</span>
|
|
</AdvancedMarker>
|
|
))}
|
|
</div>
|
|
)
|
|
}
|