39 lines
1.2 KiB
JavaScript
39 lines
1.2 KiB
JavaScript
import React from 'react';
|
|
import { motion, AnimatePresence } from 'framer-motion';
|
|
import { ItemDetailPanel } from '@/components/shared/ItemDetailPanel';
|
|
|
|
/**
|
|
* AutoLabDetailPanel
|
|
* Premium slide-over wrapper for the ItemDetailPanel.
|
|
* Handles animations and backdrop.
|
|
*/
|
|
export const AutoLabDetailPanel = ({ isOpen, onClose, ...props }) => {
|
|
return (
|
|
<AnimatePresence>
|
|
{isOpen && (
|
|
<>
|
|
{/* Backdrop Overlay */}
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
exit={{ opacity: 0 }}
|
|
onClick={onClose}
|
|
className="fixed inset-0 bg-black/40 backdrop-blur-[2px] z-[60] cursor-pointer"
|
|
/>
|
|
|
|
{/* Slide-over Panel */}
|
|
<motion.div
|
|
initial={{ x: '100%' }}
|
|
animate={{ x: 0 }}
|
|
exit={{ x: '100%' }}
|
|
transition={{ type: 'spring', damping: 30, stiffness: 300 }}
|
|
className="fixed right-0 top-0 h-full w-full max-w-2xl bg-white dark:bg-[#151515] z-[70] shadow-2xl flex flex-col border-l border-border"
|
|
>
|
|
<ItemDetailPanel onClose={onClose} {...props} />
|
|
</motion.div>
|
|
</>
|
|
)}
|
|
</AnimatePresence>
|
|
);
|
|
};
|