Files
web/components/HotelReservation/SelectRate/RoomSelection/FlexibilityOption/Popover/index.tsx
2024-10-10 10:48:02 +02:00

45 lines
982 B
TypeScript

import {
Button,
Dialog,
OverlayArrow,
Popover,
type PopoverProps,
} from "react-aria-components"
import { CloseIcon } from "@/components/Icons"
import styles from "./popover.module.css"
interface PricePopoverProps extends Omit<PopoverProps, "children"> {
children: React.ReactNode
}
export default function PricePopover({
children,
...props
}: PricePopoverProps) {
return (
<Popover {...props}>
<OverlayArrow className={styles.arrow}>
<svg
width="12"
height="12"
viewBox="0 0 12 12"
style={{ display: "block", transform: "rotate(180deg)" }}
>
<path d="M0 0L6 6L12 0" fill="white" />
</svg>
</OverlayArrow>
<Dialog>
<Button
onPress={() => props.onOpenChange?.(false)}
className={styles.closeButton}
>
<CloseIcon className={styles.closeIcon} />
</Button>
{children}
</Dialog>
</Popover>
)
}