53 lines
1.7 KiB
TypeScript
53 lines
1.7 KiB
TypeScript
import { ScandicLogoIcon } from "@/components/Icons"
|
|
import Image from "@/components/Image"
|
|
import Button from "@/components/TempDesignSystem/Button"
|
|
import Chip from "@/components/TempDesignSystem/Chip"
|
|
import Title from "@/components/TempDesignSystem/Text/Title"
|
|
import { getIntl } from "@/i18n"
|
|
|
|
import styles from "./hotelCard.module.css"
|
|
|
|
import { HotelCardProps } from "@/types/components/hotelReservation/selectHotel/hotelCardProps"
|
|
|
|
export default async function HotelCard({ hotel }: HotelCardProps) {
|
|
const { formatMessage } = await getIntl()
|
|
return (
|
|
<article className={styles.card}>
|
|
<Image
|
|
src={hotel.hotelContent.images.imageSizes.large}
|
|
alt={hotel.hotelContent.images.metaData.altText}
|
|
width={300}
|
|
height={200}
|
|
className={styles.image}
|
|
/>
|
|
<div className={styles.information}>
|
|
<header className={styles.title}>
|
|
<ScandicLogoIcon color="red" />
|
|
<Title as="h4" textTransform="capitalize">
|
|
{hotel.name}
|
|
</Title>
|
|
</header>
|
|
<div className={styles.description}>
|
|
<span>{`${hotel.address.streetAddress}, ${hotel.address.city}`}</span>
|
|
<span>{hotel.hotelContent.texts.descriptions.short}</span>
|
|
</div>
|
|
<div className={styles.chips}>
|
|
{hotel.detailedFacilities.slice(0, 6).map((chip, index) => (
|
|
<Chip key={`chip-${index}`}>{chip.name}</Chip>
|
|
))}
|
|
</div>
|
|
<footer className={styles.booking}>
|
|
<Button
|
|
theme="base"
|
|
intent="primary"
|
|
size="small"
|
|
className={styles.button}
|
|
>
|
|
{formatMessage({ id: "Book" })}
|
|
</Button>
|
|
</footer>
|
|
</div>
|
|
</article>
|
|
)
|
|
}
|