| import React, { useEffect } from "react"; |
| import { X } from "lucide-react"; |
|
|
| interface DrawerProps { |
| isOpen: boolean; |
| onClose: () => void; |
| title: string; |
| subtitle?: string; |
| children: React.ReactNode; |
| } |
|
|
| export const Drawer: React.FC<DrawerProps> = ({ |
| isOpen, |
| onClose, |
| title, |
| subtitle, |
| children, |
| }) => { |
| useEffect(() => { |
| const handleKeyDown = (e: KeyboardEvent) => { |
| if (e.key === "Escape") { |
| onClose(); |
| } |
| }; |
| if (isOpen) { |
| window.addEventListener("keydown", handleKeyDown); |
| document.body.style.overflow = "hidden"; |
| } |
| return () => { |
| window.removeEventListener("keydown", handleKeyDown); |
| document.body.style.overflow = "unset"; |
| }; |
| }, [isOpen, onClose]); |
|
|
| if (!isOpen) return null; |
|
|
| return ( |
| <div className="fixed inset-0 z-50 overflow-hidden bg-[#040810]/70 backdrop-blur-sm"> |
| <div className="absolute inset-0" onClick={onClose} /> |
| <div className="fixed inset-y-0 right-0 max-w-full flex pl-10"> |
| <div className="w-screen max-w-xl bg-[#0d1527] shadow-2xl border-l border-[#1b2b4d] flex flex-col text-slate-100"> |
| <div className="px-6 py-5 border-b border-[#1b2b4d] flex items-start justify-between bg-[#080e1c]"> |
| <div> |
| <h2 className="text-lg font-bold text-white">{title}</h2> |
| {subtitle && <p className="text-xs text-slate-400 mt-0.5">{subtitle}</p>} |
| </div> |
| <button |
| onClick={onClose} |
| className="p-1 rounded-lg text-slate-400 hover:text-white hover:bg-[#111d38] transition-colors cursor-pointer" |
| aria-label="Close drawer" |
| > |
| <X className="w-5 h-5" /> |
| </button> |
| </div> |
| <div className="p-6 overflow-y-auto flex-1 space-y-6">{children}</div> |
| </div> |
| </div> |
| </div> |
| ); |
| }; |
|
|
