scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(SW-240): add basic styling

Browse Source
This commit is contained in:
Fredrik Thorsson
2024-08-13 14:13:02 +02:00
parent a3602b285b
commit 8c339fa593
10 changed files with 125 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
components/BookingWidget/index.tsx
View File

@@ -6,6 +6,7 @@ import { useIntl } from "react-intl"
import { dt } from "@/lib/dt"
import Button from "../TempDesignSystem/Button"
import Body from "../TempDesignSystem/Text/Body"
import { bookingWidgetSchema } from "./schema"
import styles from "./bookingWidget.module.css"
@@ -13,7 +14,7 @@ import styles from "./bookingWidget.module.css"
import { type BookingWidgetSchema } from "@/types/components/bookingWidget"
export function BookingWidget() {
const { formatMessage } = useIntl()
const intl = useIntl()
const methods = useForm<BookingWidgetSchema>({
defaultValues: {
@@ -54,17 +55,75 @@ export function BookingWidget() {
<FormProvider {...methods}>
<div className={styles.input}>
<div className={styles.where}>
{formatMessage({ id: "Where to" })}
<Body
color="red"
textTransform="bold"
className={styles.bodyFontSize}
>
{intl.formatMessage({ id: "Where to" })}
</Body>
</div>
<div className={styles.when}>
<Body
color="red"
textTransform="bold"
className={styles.bodyFontSize}
>
{intl.formatMessage({ id: "When" })}
</Body>
</div>
<div className={styles.when}>{formatMessage({ id: "When" })}</div>
<div className={styles.rooms}>
{formatMessage({ id: "Rooms & Guests" })}
<Body
color="red"
textTransform="bold"
className={styles.bodyFontSize}
>
{intl.formatMessage({ id: "Rooms & Guests" })}
</Body>
</div>
<div className={styles.vouchers}>
{formatMessage({ id: "Booking codes and vouchers" })}
<Body
color="textMediumContrast"
textTransform="bold"
className={styles.bodyFontSize}
>
{intl.formatMessage({ id: "Booking codes and vouchers" })}
</Body>
</div>
<div className={styles.options}>
<div>
<Body
color="textMediumContrast"
className={styles.bodyFontSize}
>
{intl.formatMessage({ id: "Use bonus cheque" })}
</Body>
</div>
<div>
<Body
color="textMediumContrast"
className={styles.bodyFontSize}
>
{intl.formatMessage({ id: "Book reward night" })}
</Body>
</div>
</div>
</div>
<Button type="submit">Search</Button>
<Button
type="submit"
size="small"
theme="base"
intent="primary"
className={styles.button}
>
<Body
color="white"
textTransform="bold"
className={styles.bodyFontSize}
>
{intl.formatMessage({ id: "Find hotels" })}
</Body>
</Button>
</FormProvider>
</form>
</div>