101 lines
3.2 KiB
TypeScript
101 lines
3.2 KiB
TypeScript
"use client"
|
|
|
|
import {
|
|
Button,
|
|
Dialog,
|
|
DialogTrigger,
|
|
Modal,
|
|
ModalOverlay,
|
|
} from "react-aria-components"
|
|
import { useIntl } from "react-intl"
|
|
import { useMediaQuery } from "usehooks-ts"
|
|
|
|
import { IconButton } from "@scandic-hotels/design-system/IconButton"
|
|
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
|
|
import { Typography } from "@scandic-hotels/design-system/Typography"
|
|
|
|
import MeetingPackageWidgetContent from "./Content/Content"
|
|
|
|
import styles from "./meetingPackageWidget.module.css"
|
|
|
|
export interface MeetingPackageWidgetProps {
|
|
destination?: string
|
|
className?: string
|
|
}
|
|
|
|
export default function MeetingPackageWidget(props: MeetingPackageWidgetProps) {
|
|
const intl = useIntl()
|
|
/* Meeting booking widget changes design at 948px */
|
|
const isDesktop = useMediaQuery("(min-width: 948px)", {
|
|
initializeWithValue: false,
|
|
})
|
|
|
|
return isDesktop ? (
|
|
<MeetingPackageWidgetContent {...props} />
|
|
) : (
|
|
<div className={props.className}>
|
|
<DialogTrigger>
|
|
<div className={styles.buttonWrapper}>
|
|
<Button className={styles.button}>
|
|
<span className={styles.fakeInput}>
|
|
<Typography variant="Body/Supporting text (caption)/smBold">
|
|
<span>
|
|
{intl.formatMessage({
|
|
defaultMessage: "Meeting location",
|
|
})}
|
|
</span>
|
|
</Typography>
|
|
<Typography variant="Body/Paragraph/mdRegular">
|
|
<span className={styles.fakePlaceholder}>
|
|
{intl.formatMessage({
|
|
defaultMessage: "Hotels & destinations",
|
|
})}
|
|
</span>
|
|
</Typography>
|
|
</span>
|
|
<span className={styles.fakeButton}>
|
|
<MaterialIcon icon="search" color="CurrentColor" />
|
|
<Typography variant="Body/Supporting text (caption)/smBold">
|
|
<span>
|
|
{intl.formatMessage({
|
|
defaultMessage: "Search",
|
|
})}
|
|
</span>
|
|
</Typography>
|
|
</span>
|
|
</Button>
|
|
</div>
|
|
<ModalOverlay isDismissable className={styles.overlay}>
|
|
<Modal className={styles.modal}>
|
|
<Dialog
|
|
className={styles.dialog}
|
|
aria-label={intl.formatMessage({
|
|
defaultMessage: "Book a meeting",
|
|
})}
|
|
>
|
|
{({ close }) => (
|
|
<>
|
|
<div className={styles.closeButtonWrapper}>
|
|
<IconButton
|
|
theme="Black"
|
|
style="Muted"
|
|
onPress={close}
|
|
className={styles.closeButton}
|
|
aria-label={intl.formatMessage({
|
|
defaultMessage: "Close",
|
|
})}
|
|
>
|
|
<MaterialIcon icon="close" />
|
|
</IconButton>
|
|
</div>
|
|
<MeetingPackageWidgetContent {...props} />
|
|
</>
|
|
)}
|
|
</Dialog>
|
|
</Modal>
|
|
</ModalOverlay>
|
|
</DialogTrigger>
|
|
</div>
|
|
)
|
|
}
|