91 lines
3.1 KiB
TypeScript
91 lines
3.1 KiB
TypeScript
"use client"
|
|
import { useIntl } from "react-intl"
|
|
|
|
import { SearchIcon } from "@/components/Icons"
|
|
|
|
import { SearchSkeleton } from "../Forms/BookingWidget/FormContent/Search"
|
|
import { VoucherSkeleton } from "../Forms/BookingWidget/FormContent/Voucher"
|
|
import { bookingWidgetVariants } from "../Forms/BookingWidget/variants"
|
|
import SkeletonShimmer from "../SkeletonShimmer"
|
|
import Button from "../TempDesignSystem/Button"
|
|
import Caption from "../TempDesignSystem/Text/Caption"
|
|
|
|
import formStyles from "../Forms/BookingWidget/form.module.css"
|
|
import formContentStyles from "../Forms/BookingWidget/FormContent/formContent.module.css"
|
|
import widgetStyles from "./bookingWidget.module.css"
|
|
|
|
export default function BookingWidgetSkeleton() {
|
|
const intl = useIntl()
|
|
|
|
const classNames = bookingWidgetVariants({
|
|
type: "full",
|
|
})
|
|
|
|
return (
|
|
<section className={widgetStyles.containerDesktop}>
|
|
<section className={classNames}>
|
|
<form className={formStyles.form}>
|
|
<div className={formContentStyles.input}>
|
|
<div className={formContentStyles.inputContainer}>
|
|
<div className={formContentStyles.where}>
|
|
<SearchSkeleton />
|
|
</div>
|
|
<div className={formContentStyles.when}>
|
|
<Caption color="red" type="bold">
|
|
{intl.formatMessage(
|
|
{ id: "booking.nights" },
|
|
{ totalNights: 0 }
|
|
)}
|
|
</Caption>
|
|
<SkeletonShimmer />
|
|
</div>
|
|
<div className={formContentStyles.rooms}>
|
|
<Caption color="red" type="bold" asChild>
|
|
<span>{intl.formatMessage({ id: "Guests & Rooms" })}</span>
|
|
</Caption>
|
|
<SkeletonShimmer />
|
|
</div>
|
|
</div>
|
|
<div className={formContentStyles.voucherContainer}>
|
|
<VoucherSkeleton />
|
|
</div>
|
|
<div className={formContentStyles.buttonContainer}>
|
|
<Button
|
|
className={formContentStyles.button}
|
|
intent="primary"
|
|
theme="base"
|
|
type="submit"
|
|
disabled
|
|
>
|
|
<Caption
|
|
color="white"
|
|
type="bold"
|
|
className={formContentStyles.buttonText}
|
|
asChild
|
|
>
|
|
<span>{intl.formatMessage({ id: "Search" })}</span>
|
|
</Caption>
|
|
<span className={formContentStyles.icon}>
|
|
<SearchIcon color="white" width={28} height={28} />
|
|
</span>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</section>
|
|
{/* <section className={styles.containerMobile} data-open={isOpen}>
|
|
<button
|
|
className={styles.close}
|
|
onClick={closeMobileSearch}
|
|
type="button"
|
|
>
|
|
<CloseLargeIcon />
|
|
</button>
|
|
<Form locations={locations} type={type} />
|
|
</section>
|
|
<div className={styles.backdrop} onClick={closeMobileSearch} />
|
|
<MobileToggleButton openMobileSearch={openMobileSearch} /> */}
|
|
</section>
|
|
)
|
|
}
|