← Назадimport * as React from 'react';
import { X } from 'lucide-react';
import { cn } from '../../lib/utils';
interface DialogProps {
open: boolean;
onOpenChange: (open: boolean) => void;
children: React.ReactNode;
}
const Dialog: React.FC<DialogProps> = ({ open, onOpenChange, children }) => {
if (!open) return null;
return (
<div
className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/80 backdrop-blur-sm animate-fadeIn"
onClick={() => onOpenChange(false)}
>
<div
className="relative max-w-4xl w-full max-h-[90vh] overflow-hidden animate-slideUp"
onClick={(e) => e.stopPropagation()}
>
{children}
</div>
</div>
);
};
const DialogContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
({ className, children, ...props }, ref) => (
<div
ref={ref}
className={cn(
'bg-gradient-to-br from-slate-800 to-slate-900 rounded-3xl border border-white/10 shadow-2xl overflow-hidden',
className
)}
{...props}
>
{children}
</div>
)
);
DialogContent.displayName = 'DialogContent';
const DialogHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
({ className, ...props }, ref) => (
<div
ref={ref}
className={cn('flex items-center justify-between p-6 border-b border-white/10 bg-white/5', className)}
{...props}
/>
)
);
DialogHeader.displayName = 'DialogHeader';
const DialogTitle = React.forwardRef<HTMLHeadingElement, React.HTMLAttributes<HTMLHeadingElement>>(
({ className, ...props }, ref) => (
<h2
ref={ref}
className={cn('text-2xl font-bold text-white', className)}
{...props}
/>
)
);
DialogTitle.displayName = 'DialogTitle';
interface DialogCloseProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {}
const DialogClose = React.forwardRef<HTMLButtonElement, DialogCloseProps>(
({ className, ...props }, ref) => (
<button
ref={ref}
className={cn(
'rounded-full p-2 bg-white/10 hover:bg-white/20 transition-all',
className
)}
{...props}
>
<X className="w-5 h-5 text-white" />
</button>
)
);
DialogClose.displayName = 'DialogClose';
const DialogBody = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
({ className, ...props }, ref) => (
<div
ref={ref}
className={cn('p-6 overflow-y-auto max-h-[calc(90vh-120px)]', className)}
{...props}
/>
)
);
DialogBody.displayName = 'DialogBody';
export { Dialog, DialogContent, DialogHeader, DialogTitle, DialogClose, DialogBody };