90 lines
3.3 KiB
TypeScript
90 lines
3.3 KiB
TypeScript
import { mapFacilityToIcon } from "@/components/ContentType/HotelPage/data"
|
|
import {
|
|
ChevronRightIcon,
|
|
PriceTagIcon,
|
|
ScandicLogoIcon,
|
|
} from "@/components/Icons"
|
|
import Image from "@/components/Image"
|
|
import Button from "@/components/TempDesignSystem/Button"
|
|
import Chip from "@/components/TempDesignSystem/Chip"
|
|
import Link from "@/components/TempDesignSystem/Link"
|
|
import Caption from "@/components/TempDesignSystem/Text/Caption"
|
|
import Footnote from "@/components/TempDesignSystem/Text/Footnote"
|
|
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 intl = await getIntl()
|
|
|
|
const sortedAmenities = hotel.detailedFacilities
|
|
.sort((a, b) => b.sortOrder - a.sortOrder)
|
|
.slice(0, 5)
|
|
|
|
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}
|
|
/>
|
|
<header className={styles.header}>
|
|
<ScandicLogoIcon color="red" className={styles.logo} />
|
|
<Title as="h4" textTransform="capitalize">
|
|
{hotel.name}
|
|
</Title>
|
|
<Footnote color="textMediumContrast">{`${hotel.address.streetAddress}, ${hotel.address.city}`}</Footnote>
|
|
<Footnote color="textMediumContrast">{`${hotel.location.distanceToCentre} ${intl.formatMessage({ id: "km to city center" })}`}</Footnote>
|
|
</header>
|
|
<section className={styles.hotel}>
|
|
<div className={styles.facilities}>
|
|
{sortedAmenities.map((facility) => {
|
|
const IconComponent = mapFacilityToIcon(facility.name)
|
|
return (
|
|
<div className={styles.facilitiesItem} key={facility.id}>
|
|
{IconComponent && <IconComponent color="grey80" />}
|
|
<Caption color="textMediumContrast">{facility.name}</Caption>
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
<Link href="#" color="burgundy" className={styles.link}>
|
|
{intl.formatMessage({ id: "See hotel details" })}
|
|
<ChevronRightIcon color="burgundy" />
|
|
</Link>
|
|
</section>
|
|
<section className={styles.prices}>
|
|
<div>
|
|
<Chip intent="sublte" className={styles.public}>
|
|
<PriceTagIcon width={15} height={15} />
|
|
{intl.formatMessage({ id: "Public price from" })}
|
|
</Chip>
|
|
<Caption color="textMediumContrast">2820 SEK / night</Caption>
|
|
<Footnote color="textMediumContrast">approx 280 eur</Footnote>
|
|
</div>
|
|
<div>
|
|
<Chip intent="pale" className={styles.member}>
|
|
<PriceTagIcon width={15} height={15} />
|
|
{intl.formatMessage({ id: "Member price from" })}
|
|
</Chip>
|
|
<Caption color="textMediumContrast">2820 SEK / night</Caption>
|
|
<Footnote color="textMediumContrast">approx 280 eur</Footnote>
|
|
</div>
|
|
<Button
|
|
theme="base"
|
|
intent="tertiary"
|
|
size="small"
|
|
className={styles.button}
|
|
>
|
|
{intl.formatMessage({ id: "See rooms" })}
|
|
</Button>
|
|
</section>
|
|
</article>
|
|
)
|
|
}
|