35 lines
1.1 KiB
TypeScript
35 lines
1.1 KiB
TypeScript
|
'use client';
|
||
|
|
|
||
|
|
import React from 'react';
|
||
|
|
|
||
|
|
interface ModalProps {
|
||
|
|
isOpen: boolean;
|
||
|
|
onClose: () => void;
|
||
|
|
title: string;
|
||
|
|
children: React.ReactNode;
|
||
|
|
}
|
||
|
|
|
||
|
|
export function Modal({ isOpen, onClose, title, children }: ModalProps) {
|
||
|
|
if (!isOpen) return null;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="modal-overlay" onClick={onClose}>
|
||
|
|
<div className="modal-content" onClick={(e) => e.stopPropagation()}>
|
||
|
|
<div className="flex items-center justify-between mb-6">
|
||
|
|
<h3 className="text-lg font-semibold text-white">{title}</h3>
|
||
|
|
<button
|
||
|
|
onClick={onClose}
|
||
|
|
className="text-[var(--muted-fg)] hover:text-white transition-colors p-1 rounded-lg hover:bg-white/5"
|
||
|
|
>
|
||
|
|
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||
|
|
<line x1="18" y1="6" x2="6" y2="18" />
|
||
|
|
<line x1="6" y1="6" x2="18" y2="18" />
|
||
|
|
</svg>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
{children}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|