57 lines
1.8 KiB
TypeScript
57 lines
1.8 KiB
TypeScript
import Image from "@/components/Image"
|
|
import Caption from "@/components/TempDesignSystem/Text/Caption"
|
|
import Title from "@/components/TempDesignSystem/Text/Title"
|
|
import { getIntl } from "@/i18n"
|
|
import { getSingleDecimal } from "@/utils/numberFormatting"
|
|
|
|
import ToggleSidePeek from "./ToggleSidePeek"
|
|
|
|
import styles from "./header.module.css"
|
|
|
|
import type { HotelHeaderProps } from "@/types/components/hotelReservation/enterDetails/hotelHeader"
|
|
|
|
export default async function HotelHeader({ hotelData }: HotelHeaderProps) {
|
|
const intl = await getIntl()
|
|
const hotel = hotelData.data.attributes
|
|
|
|
const image = hotel.hotelContent?.images
|
|
|
|
const addressStr = `${hotel.address.streetAddress}, ${hotel.address.city}`
|
|
|
|
return (
|
|
<header className={styles.header}>
|
|
<Image
|
|
className={styles.hero}
|
|
alt={image.metaData.altText || image.metaData.altText_En || ""}
|
|
src={image.imageSizes.large}
|
|
height={200}
|
|
width={1196}
|
|
/>
|
|
<div className={styles.wrapper}>
|
|
<div className={styles.container}>
|
|
<div className={styles.titleContainer}>
|
|
<Title as="h1" level="h1" color="white" className={styles.title}>
|
|
{hotel.name}
|
|
</Title>
|
|
<div className={styles.address}>
|
|
<Caption color="white">{addressStr}</Caption>
|
|
<Caption color="white">∙</Caption>
|
|
<Caption color="white">
|
|
{intl.formatMessage(
|
|
{ id: "{number} km to city centre" },
|
|
{
|
|
number: getSingleDecimal(
|
|
hotel.location.distanceToCentre / 1000
|
|
),
|
|
}
|
|
)}
|
|
</Caption>
|
|
</div>
|
|
</div>
|
|
<ToggleSidePeek hotelId={hotel.operaId} />
|
|
</div>
|
|
</div>
|
|
</header>
|
|
)
|
|
}
|