scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(SW-340): Added HotelCardDialog component

Browse Source
This commit is contained in:
Pontus Dreij
2024-11-07 16:07:54 +01:00
parent 7a49d4a393
commit 2748120890
19 changed files with 309 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
components/Maps/InteractiveMap/HotelListingMapContent/index.tsx
View File

@@ -3,21 +3,31 @@ import {
AdvancedMarkerAnchorPoint,
} from "@vis.gl/react-google-maps"
import HotelCardDialog from "@/components/HotelReservation/HotelCardDialog"
import Body from "@/components/TempDesignSystem/Text/Body"
import HotelMarker from "../../Markers/Hotel"
import HotelMarker from "../../Markers/HotelMarker"
import styles from "./hotelListingMapContent.module.css"
import { HotelData } from "@/types/components/hotelReservation/selectHotel/hotelCardListingProps"
import { HotelPin } from "@/types/components/hotelReservation/selectHotel/map"
export default function HotelListingMapContent({
activeHotelPin,
hotelPins,
hotels,
onActiveHotelPinChange,
}: {
activeHotelPin?: HotelPin["name"] | null
hotelPins: HotelPin[]
hotels?: HotelData[]
onActiveHotelPinChange?: (pinName: string | null) => void
}) {
function toggleActiveHotelPin(pinName: string) {
onActiveHotelPinChange?.(activeHotelPin === pinName ? null : pinName)
}
return (
<div>
{hotelPins.map((pin) => (
@@ -27,16 +37,27 @@ export default function HotelListingMapContent({
position={pin.coordinates}
anchorPoint={AdvancedMarkerAnchorPoint.CENTER}
zIndex={activeHotelPin === pin.name ? 2 : 0}
onMouseEnter={() => onActiveHotelPinChange?.(pin.name)}
onMouseLeave={() => onActiveHotelPinChange?.(null)}
onClick={() => toggleActiveHotelPin(pin.name)}
>
<HotelCardDialog isOpen={activeHotelPin === pin.name} pin={pin} />
<span
className={`${styles.pin} ${activeHotelPin === pin.name ? styles.active : ""}`}
>
<span className={styles.pinIcon}>
<HotelMarker width={16} />
<HotelMarker
width={16}
color={activeHotelPin === pin.name ? "burgundy" : "white"}
/>
</span>
<Body asChild>
<Body
asChild
color={activeHotelPin === pin.name ? "white" : "textHighContrast"}
>
<span>
{pin.price} {pin.currency}
{pin.memberPrice} {pin.currency}
</span>
</Body>
</span>