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

feat(SW-340): Added scroll to top button

Browse Source
This commit is contained in:
Pontus Dreij
2024-11-08 10:00:53 +01:00
parent 2748120890
commit 5f46844b9b
22 changed files with 238 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -2,6 +2,7 @@ import {
AdvancedMarker,
AdvancedMarkerAnchorPoint,
} from "@vis.gl/react-google-maps"
import { useState } from "react"
import HotelCardDialog from "@/components/HotelReservation/HotelCardDialog"
import Body from "@/components/TempDesignSystem/Text/Body"
@@ -10,59 +11,77 @@ 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"
import type { HotelListingMapContentProps } 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)
}: HotelListingMapContentProps) {
const [hoveredHotelPin, setHoveredHotelPin] = useState<string | null>(null)
function toggleActiveHotelPin(pinName: string | null) {
if (onActiveHotelPinChange) {
onActiveHotelPinChange(activeHotelPin === pinName ? null : pinName)
setHoveredHotelPin(null)
}
}
function isPinActiveOrHovered(pinName: string) {
return activeHotelPin === pinName || hoveredHotelPin === pinName
}
return (
<div>
{hotelPins.map((pin) => (
<AdvancedMarker
key={pin.name}
className={styles.advancedMarker}
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 : ""}`}
{hotelPins.map((pin) => {
const isActiveOrHovered = isPinActiveOrHovered(pin.name)
return (
<AdvancedMarker
key={pin.name}
className={styles.advancedMarker}
position={pin.coordinates}
anchorPoint={AdvancedMarkerAnchorPoint.CENTER}
zIndex={isActiveOrHovered ? 2 : 0}
onMouseEnter={() => setHoveredHotelPin(pin.name)}
onMouseLeave={() => setHoveredHotelPin(null)}
onClick={() =>
toggleActiveHotelPin(
activeHotelPin === pin.name ? null : pin.name
)
}
>
<span className={styles.pinIcon}>
<HotelMarker
width={16}
color={activeHotelPin === pin.name ? "burgundy" : "white"}
/>
</span>
<Body
asChild
color={activeHotelPin === pin.name ? "white" : "textHighContrast"}
<HotelCardDialog
isOpen={isActiveOrHovered}
handleClose={(event: { stopPropagation: () => void }) => {
event.stopPropagation()
if (activeHotelPin === pin.name) {
toggleActiveHotelPin(null)
}
}}
pin={pin}
/>
<span
className={`${styles.pin} ${isActiveOrHovered ? styles.active : ""}`}
>
<span>
{pin.memberPrice} {pin.currency}
<span className={styles.pinIcon}>
<HotelMarker
width={16}
color={isActiveOrHovered ? "burgundy" : "white"}
/>
</span>
</Body>
</span>
</AdvancedMarker>
))}
<Body
asChild
color={isActiveOrHovered ? "white" : "textHighContrast"}
>
<span>
{pin.memberPrice} {pin.currency}
</span>
</Body>
</span>
</AdvancedMarker>
)
})}
</div>
)
}