| 1 | import { forwardRef, type ButtonHTMLAttributes } from "react"; |
| 2 | import { X } from "lucide-react"; |
| 3 | import { Tooltip } from "./Tooltip"; |
| 4 | |
| 5 | interface ModalCloseButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> { |
| 6 | label: string; |
| 7 | } |
| 8 | |
| 9 | export const ModalCloseButton = forwardRef<HTMLButtonElement, ModalCloseButtonProps>(function ModalCloseButton({ label, className = "", type = "button", ...props }, ref) { |
| 10 | const ariaLabel = props["aria-label"] ?? label; |
| 11 | const classes = `modal-close-button${className ? ` ${className}` : ""}`; |
| 12 | |
| 13 | return ( |
| 14 | <Tooltip label={label}> |
| 15 | <button {...props} ref={ref} type={type} className={classes} aria-label={ariaLabel}> |
| 16 | <X size={15} strokeWidth={1.9} /> |
| 17 | </button> |
| 18 | </Tooltip> |
| 19 | ); |
| 20 | }); |
| 21 |