45 lines
1.2 KiB
TypeScript
45 lines
1.2 KiB
TypeScript
import React from 'react';
|
|
import { createPortal } from 'react-dom';
|
|
import { XMarkIcon } from '@heroicons/react/24/outline';
|
|
import { useOverlayDismiss } from '../../hooks/useOverlayDismiss';
|
|
|
|
type ModalSize = 'sm' | 'md' | 'lg' | 'xl';
|
|
|
|
const sizeMap: Record<ModalSize, string> = {
|
|
sm: '420px',
|
|
md: '540px',
|
|
lg: '720px',
|
|
xl: '960px',
|
|
};
|
|
|
|
interface Props {
|
|
open: boolean;
|
|
title: string;
|
|
size?: ModalSize;
|
|
onClose: () => void;
|
|
children: React.ReactNode;
|
|
footer?: React.ReactNode;
|
|
}
|
|
|
|
export default function Modal({ open, title, size = 'md', onClose, children, footer }: Props) {
|
|
const dismiss = useOverlayDismiss(onClose, open);
|
|
|
|
if (!open) return null;
|
|
|
|
return createPortal(
|
|
<div className="overlay" {...dismiss}>
|
|
<div className="modal" style={{ maxWidth: sizeMap[size] }}>
|
|
<div className="modal-head">
|
|
<h2>{title}</h2>
|
|
<button type="button" className="mini-btn" onClick={onClose} aria-label="بستن">
|
|
<XMarkIcon style={{ width: 18, height: 18 }} />
|
|
</button>
|
|
</div>
|
|
<div className="modal-body">{children}</div>
|
|
{footer && <div className="modal-foot">{footer}</div>}
|
|
</div>
|
|
</div>,
|
|
document.body
|
|
);
|
|
}
|