Spaces:
Running
Running
File size: 2,112 Bytes
518343a | 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 | import { motion, AnimatePresence } from 'framer-motion';
import { X } from 'lucide-react';
import type { ReactNode } from 'react';
import { cn } from '@szl-holdings/design-system';
interface DrawerPanelProps {
isOpen: boolean;
onClose: () => void;
title: string;
subtitle?: string;
children: ReactNode;
width?: string;
}
export function DrawerPanel({ isOpen, onClose, title, subtitle, children, width = 'w-[480px]' }: DrawerPanelProps) {
return (
<AnimatePresence>
{isOpen && (
<>
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
transition={{ duration: 0.2 }}
className="fixed inset-0 z-40 bg-[var(--color-a11oy-navy)]/50 backdrop-blur-sm"
onClick={onClose}
/>
<motion.div
initial={{ x: '100%' }}
animate={{ x: 0 }}
exit={{ x: '100%' }}
transition={{ type: 'spring', damping: 25, stiffness: 200 }}
className={cn(
"fixed top-0 right-0 bottom-0 z-50 bg-[var(--color-a11oy-card)] border-l border-[var(--color-a11oy-border)] shadow-2xl flex flex-col",
width
)}
>
<div className="flex items-start justify-between p-6 border-b border-[var(--color-a11oy-border)]">
<div>
<h2 className="text-lg font-medium text-[var(--color-a11oy-text)]">{title}</h2>
{subtitle && <p className="text-sm text-[var(--color-a11oy-text-sub)] mt-1">{subtitle}</p>}
</div>
<button
onClick={onClose}
className="p-2 -mr-2 text-[var(--color-a11oy-text-ghost)] hover:text-[var(--color-a11oy-text)] transition-colors rounded-full hover:bg-[var(--color-a11oy-surface)]"
>
<X className="w-5 h-5" />
</button>
</div>
<div className="flex-1 overflow-y-auto p-6">
{children}
</div>
</motion.div>
</>
)}
</AnimatePresence>
);
}
|