25 lines
1.2 KiB
React
25 lines
1.2 KiB
React
|
import { useEffect } from 'react'
|
||
|
|
export default function Drawer({ isOpen, onClose, children }) {
|
||
|
|
useEffect(() => {
|
||
|
|
const h = (e) => { if (e.key === 'Escape') onClose() }
|
||
|
|
if (isOpen) document.addEventListener('keydown', h)
|
||
|
|
return () => document.removeEventListener('keydown', h)
|
||
|
|
}, [isOpen, onClose])
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
{isOpen && <div className="fixed inset-0 z-40 bg-black/50 backdrop-blur-sm" onClick={onClose} />}
|
||
|
|
<div
|
||
|
|
className={`fixed bottom-0 left-0 right-0 z-50 bg-surface-raised border-t border-surface-border rounded-t-2xl shadow-2xl transition-transform duration-300 ease-in-out ${isOpen ? 'translate-y-0' : 'translate-y-full'}`}
|
||
|
|
style={{ maxHeight: '65vh' }}
|
||
|
|
>
|
||
|
|
<div className="relative flex items-center justify-between px-6 py-3 border-b border-surface-border">
|
||
|
|
<div className="absolute left-1/2 -translate-x-1/2 top-2 w-10 h-1 bg-surface-border rounded-full" />
|
||
|
|
<div className="flex-1" />
|
||
|
|
<button onClick={onClose} className="text-text-muted hover:text-gold transition-colors text-lg">✕</button>
|
||
|
|
</div>
|
||
|
|
<div className="overflow-y-auto" style={{ maxHeight: 'calc(65vh - 52px)' }}>{children}</div>
|
||
|
|
</div>
|
||
|
|
</>
|
||
|
|
)
|
||
|
|
}
|