52 lines
1.8 KiB
TypeScript
52 lines
1.8 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 getSingleDecimal from "@/utils/numberFormatting"
|
|
|
|
import styles from "./header.module.css"
|
|
|
|
import type { HotelHeaderProps } from "@/types/components/hotelReservation/enterDetails/hotelHeader"
|
|
|
|
export default async function HotelHeader({ hotel }: HotelHeaderProps) {
|
|
const intl = await getIntl()
|
|
return (
|
|
<header className={styles.header}>
|
|
<div className={styles.wrapper}>
|
|
<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: getSingleDecimal(
|
|
hotel.location.distanceToCentre / 1000
|
|
),
|
|
}
|
|
)}
|
|
</Caption>
|
|
</address>
|
|
</div>
|
|
<div className={styles.dividerContainer}>
|
|
<Divider variant="vertical" color="subtle" />
|
|
</div>
|
|
<div className={styles.descriptionContainer}>
|
|
<Body color="baseTextHighContrast">
|
|
{hotel.hotelContent.texts.descriptions.short}
|
|
</Body>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
)
|
|
}
|