18d40120b9
Feat/SW-338 design filters and sorting on select hotel * feat(SW-338): design hotel sort dropdown * Translations * feat(SW-338): style filters * Bold * Import type * Translations * Rename and add translation * Rename translation Approved-by: Bianca Widstam
52 lines
1.7 KiB
TypeScript
52 lines
1.7 KiB
TypeScript
"use client"
|
|
import { useIntl } from "react-intl"
|
|
|
|
import Divider from "@/components/TempDesignSystem/Divider"
|
|
import Body from "@/components/TempDesignSystem/Text/Body"
|
|
import Caption from "@/components/TempDesignSystem/Text/Caption"
|
|
import Title from "@/components/TempDesignSystem/Text/Title"
|
|
|
|
import styles from "./hotelSelectionHeader.module.css"
|
|
|
|
import { HotelSelectionHeaderProps } from "@/types/components/hotelReservation/selectRate/hotelSelectionHeader"
|
|
|
|
export default function HotelSelectionHeader({
|
|
hotel,
|
|
}: HotelSelectionHeaderProps) {
|
|
const intl = useIntl()
|
|
|
|
return (
|
|
<header className={styles.hotelSelectionHeader}>
|
|
<div className={styles.hotelSelectionHeaderWrapper}>
|
|
<div className={styles.titleContainer}>
|
|
<Title as="h3" level="h1">
|
|
{hotel.name}
|
|
</Title>
|
|
<address className={styles.address}>
|
|
<Caption color="textMediumContrast">
|
|
{hotel.address.streetAddress}, {hotel.address.city}
|
|
</Caption>
|
|
<div>
|
|
<Divider variant="vertical" color="subtle" />
|
|
</div>
|
|
<Caption color="textMediumContrast">
|
|
{intl.formatMessage(
|
|
{ id: "Distance in km to city centre" },
|
|
{ number: hotel.location.distanceToCentre }
|
|
)}
|
|
</Caption>
|
|
</address>
|
|
</div>
|
|
<div className={styles.dividerContainer}>
|
|
<Divider variant="vertical" color="subtle" />
|
|
</div>
|
|
<div className={styles.descriptionContainer}>
|
|
<Body color="textHighContrast">
|
|
{hotel.hotelContent.texts.descriptions.short}
|
|
</Body>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
)
|
|
}
|