jason/fabdash
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add files via upload

Browse Source
This commit is contained in:
jasonMPM
2026-03-05 13:17:36 -06:00
committed by GitHub
parent 20416b5805
commit 533b6fbfd2
4 changed files with 46 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
frontend/src/components/UI/Drawer.jsx
View File

@@ -1,23 +1,32 @@
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} />}
{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' }}
style={{ maxHeight: '72vh' }}
>
<div className="relative flex items-center justify-between px-6 py-3 border-b border-surface-border">
{/* Handle bar + close */}
<div className="relative flex items-center justify-between px-6 py-3 border-b border-surface-border flex-shrink-0">
<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>
<button onClick={onClose} className="text-text-muted hover:text-gold transition-colors text-lg leading-none">✕</button>
</div>
{/* Scrollable content — overflow-visible on x so badge doesn't clip */}
<div className="overflow-y-auto overflow-x-hidden" style={{ maxHeight: 'calc(72vh - 52px)' }}>
{children}
</div>
<div className="overflow-y-auto" style={{ maxHeight: 'calc(65vh - 52px)' }}>{children}</div>
</div>
</>
)