hamed
f619449167
- Implement SettlementsPage for managing settlement requests with approval and rejection functionalities. - Create SmsPage for handling SMS templates, including creation, approval, rejection, and logging. - Add UserDetailPage to display detailed information about users. - Develop UsersPage for listing users with search, view, edit, and delete options. - Introduce new types for User, SmsTemplate, SmsLog, and Settlement to support the new features.
51 lines
1.6 KiB
TypeScript
51 lines
1.6 KiB
TypeScript
import React from 'react';
|
|
import { XMarkIcon } from '@heroicons/react/24/outline';
|
|
|
|
type ModalSize = 'sm' | 'md' | 'lg' | 'xl';
|
|
|
|
const sizeMap: Record<ModalSize, string> = {
|
|
sm: 'max-w-sm',
|
|
md: 'max-w-lg',
|
|
lg: 'max-w-2xl',
|
|
xl: 'max-w-4xl',
|
|
};
|
|
|
|
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) {
|
|
if (!open) return null;
|
|
|
|
return (
|
|
<div className="fixed inset-0 z-50 flex items-center justify-center p-4">
|
|
<div className="absolute inset-0 bg-black/40" onClick={onClose} />
|
|
<div
|
|
className={`relative bg-white rounded-2xl shadow-2xl w-full ${sizeMap[size]} flex flex-col max-h-[90vh]`}
|
|
style={{ animation: 'scale-in 200ms ease' }}
|
|
>
|
|
<div className="flex items-center justify-between px-6 py-4 border-b border-gray-200 shrink-0">
|
|
<h2 className="font-semibold text-gray-900 text-base">{title}</h2>
|
|
<button
|
|
onClick={onClose}
|
|
className="text-gray-400 hover:text-gray-600 transition-colors p-1 rounded-md hover:bg-gray-100"
|
|
>
|
|
<XMarkIcon className="w-5 h-5" />
|
|
</button>
|
|
</div>
|
|
<div className="flex-1 overflow-y-auto px-6 py-4">{children}</div>
|
|
{footer && (
|
|
<div className="flex items-center justify-end gap-3 px-6 py-4 border-t border-gray-200 shrink-0">
|
|
{footer}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|