Files
web/components/Forms/BookingWidget/FormContent/index.tsx
2024-08-19 15:49:59 +02:00

91 lines
2.4 KiB
TypeScript

"use client"
import { useIntl } from "react-intl"
import Button from "@/components/TempDesignSystem/Button"
import Body from "@/components/TempDesignSystem/Text/Body"
import styles from "./formContent.module.css"
export default function FormContent() {
const intl = useIntl()
const where = intl.formatMessage({ id: "Where to" })
const when = intl.formatMessage({ id: "When" })
const rooms = intl.formatMessage({ id: "Rooms & Guests" })
const vouchers = intl.formatMessage({ id: "Booking codes and vouchers" })
const bonus = intl.formatMessage({ id: "Use bonus cheque" })
const reward = intl.formatMessage({ id: "Book reward night" })
const search = intl.formatMessage({ id: "Find hotels" })
return (
<>
<div className={styles.input}>
<div className={`${styles.where} ${styles.border}`}>
<Body
color="red"
textTransform="bold"
className={styles.bodyFontSize}
>
{where}
</Body>
</div>
<div className={`${styles.when} ${styles.border}`}>
<Body
color="red"
textTransform="bold"
className={styles.bodyFontSize}
>
{when}
</Body>
</div>
<div className={`${styles.rooms} ${styles.border}`}>
<Body
color="red"
textTransform="bold"
className={styles.bodyFontSize}
>
{rooms}
</Body>
</div>
<div className={`${styles.vouchers} ${styles.border}`}>
<Body
color="textMediumContrast"
textTransform="bold"
className={styles.bodyFontSize}
>
{vouchers}
</Body>
</div>
<div className={styles.options}>
<div>
<Body color="textMediumContrast" className={styles.bodyFontSize}>
{bonus}
</Body>
</div>
<div>
<Body color="textMediumContrast" className={styles.bodyFontSize}>
{reward}
</Body>
</div>
</div>
</div>
<Button
type="submit"
size="small"
theme="base"
intent="primary"
className={styles.button}
>
<Body
color="white"
textTransform="bold"
className={styles.bodyFontSize}
>
{search}
</Body>
</Button>
</>
)
}