869c9b67b8
Feat/SW-475 enter details header * feat(SW-475): updated hotel mock data to reflect api * feat(SW-475): Added hotel selection header with sidepeek buttons * fix(SW-475): fixes from PR * fix(SW-475): changed intl string Approved-by: Arvid Norlin
53 lines
1.7 KiB
TypeScript
53 lines
1.7 KiB
TypeScript
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 { getIntl } from "@/i18n"
|
|
|
|
import HotelDetailSidePeek from "./HotelDetailSidePeek"
|
|
|
|
import styles from "./hotelSelectionHeader.module.css"
|
|
|
|
import { HotelSelectionHeaderProps } from "@/types/components/hotelReservation/selectRate/hotelSelectionHeader"
|
|
|
|
export default async function HotelSelectionHeader({
|
|
hotel,
|
|
}: HotelSelectionHeaderProps) {
|
|
const intl = await getIntl()
|
|
|
|
return (
|
|
<header className={styles.hotelSelectionHeader}>
|
|
<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 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>
|
|
<HotelDetailSidePeek />
|
|
</div>
|
|
</header>
|
|
)
|
|
}
|