78 lines
2.1 KiB
TypeScript
78 lines
2.1 KiB
TypeScript
"use client"
|
|
|
|
import { useIntl } from "react-intl"
|
|
|
|
import { EditIcon, ImageIcon } from "@/components/Icons"
|
|
import Button from "@/components/TempDesignSystem/Button"
|
|
import Link from "@/components/TempDesignSystem/Link"
|
|
import Footnote from "@/components/TempDesignSystem/Text/Footnote"
|
|
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
|
|
|
|
import styles from "./selectedRoom.module.css"
|
|
|
|
export default function SelectedRoom() {
|
|
const intl = useIntl()
|
|
return (
|
|
<article className={styles.container}>
|
|
<div className={styles.tempImage}>
|
|
<ImageIcon
|
|
color="baseButtonTertiaryOnFillNormal"
|
|
height={60}
|
|
width={60}
|
|
/>
|
|
</div>
|
|
<div className={styles.content}>
|
|
<div className={styles.textContainer}>
|
|
<Footnote
|
|
className={styles.label}
|
|
color="uiTextPlaceholder"
|
|
textTransform="uppercase"
|
|
>
|
|
{intl.formatMessage({ id: "Your room" })}
|
|
</Footnote>
|
|
<div className={styles.text}>
|
|
{/**
|
|
* [TEMP]
|
|
* No translation on Subtitles as they will be derived
|
|
* from Room selection.
|
|
*/}
|
|
<Subtitle
|
|
className={styles.room}
|
|
color="uiTextHighContrast"
|
|
type="two"
|
|
>
|
|
Cozy cabin
|
|
</Subtitle>
|
|
<Subtitle
|
|
className={styles.invertFontWeight}
|
|
color="uiTextMediumContrast"
|
|
type="two"
|
|
>
|
|
Free rebooking
|
|
</Subtitle>
|
|
<Subtitle
|
|
className={styles.invertFontWeight}
|
|
color="uiTextMediumContrast"
|
|
type="two"
|
|
>
|
|
Pay now
|
|
</Subtitle>
|
|
</div>
|
|
</div>
|
|
<Button
|
|
asChild
|
|
intent="tertiary"
|
|
size="small"
|
|
theme="base"
|
|
variant="icon"
|
|
>
|
|
<Link href="#">
|
|
<EditIcon color="baseButtonTertiaryOnFillNormal" />
|
|
{intl.formatMessage({ id: "Modify" })}
|
|
</Link>
|
|
</Button>
|
|
</div>
|
|
</article>
|
|
)
|
|
}
|