File size: 2,256 Bytes
2d06acb cefe2f8 2d06acb cefe2f8 0ac8264 2d06acb cefe2f8 2d06acb | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 | import React, { useEffect } from 'react';
import { Button } from '@/components/ui/button';
import { cn } from '@/lib/utils';
/**
* Right-side slide-over (same pattern as Leads detail). Use on Leads, Contacts, and Deals.
*/
export default function SlideOverPanel({
open,
onClose,
title,
subtitle,
headerActions = null,
children,
widthClassName = 'max-w-lg',
}) {
useEffect(() => {
if (!open) return;
const onKey = (e) => {
if (e.key === 'Escape') onClose();
};
window.addEventListener('keydown', onKey);
return () => window.removeEventListener('keydown', onKey);
}, [open, onClose]);
if (!open) return null;
return (
<div className="fixed inset-0 z-50 flex justify-end bg-black/30" role="dialog" aria-modal="true">
<button
type="button"
className="flex-1 cursor-default min-h-0"
aria-label="Close panel"
onClick={onClose}
/>
<div
className={cn(
'w-full bg-white shadow-xl h-full overflow-y-auto border-l border-slate-200 p-6',
widthClassName
)}
>
<div className="flex justify-between items-start gap-4 mb-6">
<div className="min-w-0 pr-2 flex-1">
{typeof title === 'string' || title == null ? (
<h3 className="text-lg font-bold text-slate-900 truncate">{title || ''}</h3>
) : (
<div className="w-full min-w-0">{title}</div>
)}
{subtitle ? (
<p className="text-sm text-slate-500 mt-1 break-words">{subtitle}</p>
) : null}
</div>
<div className="flex items-center gap-2 shrink-0">
{headerActions}
<Button variant="ghost" size="sm" onClick={onClose}>
Close
</Button>
</div>
</div>
{children}
</div>
</div>
);
}
|