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

34
components/HotelReservation/HotelCardDialog/index.tsx
View File

@@ -3,6 +3,7 @@
import { useIntl } from "react-intl"
import { mapFacilityToIcon } from "@/components/ContentType/HotelPage/data"
import { CloseLargeIcon } from "@/components/Icons"
import TripAdvisorIcon from "@/components/Icons/TripAdvisor"
import Image from "@/components/Image"
import Button from "@/components/TempDesignSystem/Button"
@@ -13,17 +14,19 @@ import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import styles from "./hotelCardDialog.module.css"
import { HotelPin } from "@/types/components/hotelReservation/selectHotel/map"
import { HotelCardDialogProps } from "@/types/components/hotelReservation/selectHotel/map"
export default function HotelCardDialog({
pin,
isOpen,
}: {
isOpen: boolean
pin: HotelPin
}) {
handleClose,
}: HotelCardDialogProps) {
const intl = useIntl()
if (!pin) {
return null
}
const {
name,
publicPrice,
@@ -34,15 +37,20 @@ export default function HotelCardDialog({
ratings,
} = pin
const firstImage = images[0]?.imageSizes?.small
const altText = images[0]?.metaData?.altText
return (
<dialog open={isOpen} className={styles.dialog}>
<div className={styles.dialogContainer}>
<CloseLargeIcon
onClick={handleClose}
className={styles.closeIcon}
width={16}
height={16}
/>
<div className={styles.imageContainer}>
<Image
src={images[0].imageSizes.small}
alt={images[0].metaData.altText}
fill
/>
<Image src={firstImage} alt={altText} fill />
<div className={styles.tripAdvisor}>
<Chip intent="primary" className={styles.tripAdvisor}>
<TripAdvisorIcon color="white" />
@@ -58,7 +66,9 @@ export default function HotelCardDialog({
return (
<div className={styles.facilitiesItem} key={facility.id}>
{IconComponent && <IconComponent color="grey80" />}
<Caption color="textMediumContrast">{facility.name}</Caption>
<Caption color="uiTextMediumContrast">
{facility.name}
</Caption>
</div>
)
})}
@@ -72,7 +82,7 @@ export default function HotelCardDialog({
</Body>
</Subtitle>
{memberPrice && (
<Subtitle type="two" color="red">
<Subtitle type="two" color="red" className={styles.memberPrice}>
{memberPrice} {currency}
<Body asChild color="red">
<span>/{intl.formatMessage({ id: "night" })}</span>