66 lines
1.7 KiB
TypeScript
66 lines
1.7 KiB
TypeScript
'use client';
|
|
|
|
import { ReactNode } from 'react';
|
|
|
|
interface ModalProps {
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
title: string;
|
|
children: ReactNode;
|
|
actions?: {
|
|
label: string;
|
|
onClick: () => void;
|
|
variant?: 'primary' | 'secondary';
|
|
disabled?: boolean;
|
|
}[];
|
|
}
|
|
|
|
export default function Modal({
|
|
isOpen,
|
|
onClose,
|
|
title,
|
|
children,
|
|
actions = [],
|
|
}: ModalProps) {
|
|
if (!isOpen) return null;
|
|
|
|
return (
|
|
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
|
|
<div className="bg-white rounded-lg shadow-lg max-w-md w-full mx-4">
|
|
<div className="flex justify-between items-center p-6 border-b border-gray-200">
|
|
<h2 className="text-xl font-bold">{title}</h2>
|
|
<button
|
|
onClick={onClose}
|
|
className="text-gray-500 hover:text-gray-700"
|
|
>
|
|
✕
|
|
</button>
|
|
</div>
|
|
|
|
<div className="p-6">
|
|
{children}
|
|
</div>
|
|
|
|
{actions.length > 0 && (
|
|
<div className="flex gap-2 px-6 pb-6">
|
|
{actions.map((action) => (
|
|
<button
|
|
key={action.label}
|
|
onClick={action.onClick}
|
|
disabled={action.disabled}
|
|
className={`flex-1 px-4 py-2 rounded-md transition-colors ${
|
|
action.variant === 'primary'
|
|
? 'bg-blue-500 text-white hover:bg-blue-600 disabled:bg-gray-400'
|
|
: 'border border-gray-300 hover:bg-gray-50 disabled:bg-gray-100'
|
|
} disabled:cursor-not-allowed`}
|
|
>
|
|
{action.label}
|
|
</button>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|