52 lines
1.8 KiB
TypeScript
52 lines
1.8 KiB
TypeScript
import Button from "@/components/TempDesignSystem/Button"
|
|
import Caption from "@/components/TempDesignSystem/Text/Caption"
|
|
import Title from "@/components/TempDesignSystem/Text/Title"
|
|
import { getIntl } from "@/i18n"
|
|
|
|
import styles from "./roomCard.module.css"
|
|
|
|
import { RoomCardProps } from "@/types/components/hotelReservation/selectRate/roomCard"
|
|
|
|
export default async function RoomCard({ room }: RoomCardProps) {
|
|
const { formatMessage } = await getIntl()
|
|
return (
|
|
<div className={styles.card}>
|
|
<div className={styles.cardBody}>
|
|
<div>
|
|
<Title className={styles.name} as="h5" level="h3">
|
|
{room.name}
|
|
</Title>
|
|
<div className={styles.nameInfo}>i</div>
|
|
</div>
|
|
<Caption color="burgundy">{room.size}</Caption>
|
|
<Caption color="burgundy">{room.description}</Caption>
|
|
|
|
<Caption color="burgundy">
|
|
{/* TODO: Handle currency and this whole line of text in a better way through intl */}
|
|
{formatMessage({ id: "From" })}{" "}
|
|
<span className={styles.price}>{room.pricePerNight}</span>{" "}
|
|
{room.currency}/{formatMessage({ id: "night" })}
|
|
</Caption>
|
|
|
|
<Button
|
|
asChild
|
|
type="button"
|
|
size="small"
|
|
theme="primaryDark"
|
|
className={styles.button}
|
|
>
|
|
<label htmlFor={`room-${room.id}`}>
|
|
{formatMessage({ id: "Choose room" })}
|
|
</label>
|
|
</Button>
|
|
</div>
|
|
{/* TODO: maybe use the `Image` component instead of the `img` tag. Waiting until we know how to get the image */}
|
|
{/* eslint-disable-next-line @next/next/no-img-element */}
|
|
<img
|
|
alt={formatMessage({ id: "A photo of the room" })}
|
|
src={room.imageSrc}
|
|
/>
|
|
</div>
|
|
)
|
|
}
|