'use client'; import { useEffect, useState } from 'react'; import { createPortal } from 'react-dom'; import { X } from 'lucide-react'; interface BottomSheetProps { title: string; subtitle?: string; onClose: () => void; children: React.ReactNode; } // Full-width panel that slides up from the bottom of the screen. // // Replaces the small popovers on the compact rows: those were 256px // wide and pinned to a button in the middle of the row, so on a phone // they ran off the left edge. Rendered into through a portal so // no parent's stacking context or overflow can clip it, and it sits // above the BottomNav. export default function BottomSheet({ title, subtitle, onClose, children }: BottomSheetProps) { const [mounted, setMounted] = useState(false); useEffect(() => setMounted(true), []); useEffect(() => { const onKey = (e: KeyboardEvent) => { if (e.key === 'Escape') onClose(); }; document.addEventListener('keydown', onKey); return () => document.removeEventListener('keydown', onKey); }, [onClose]); if (!mounted) return null; return createPortal(
e.stopPropagation()} className="w-full max-h-[80vh] overflow-y-auto bg-white rounded-t-2xl px-4 pt-2 pb-[calc(1.25rem+env(safe-area-inset-bottom))] shadow-[0_-8px_24px_rgba(0,0,0,0.12)]" >
, document.body, ); }