ba-cafe

Unnamed repository; edit this file 'description' to name the repository.
Log | Files | Refs | README | LICENSE

SidePanel.tsx (949B)

      1 "use client";
      2 
      3 import React from 'react';
      4 
      5 type SidePanelProps = {
      6   isOpen: boolean;
      7   onClose: () => void;
      8   title?: string;
      9   children: React.ReactNode;
     10 };
     11 
     12 const SidePanel = ({ isOpen, onClose, children }: SidePanelProps) => {
     13   return (
     14     <>
     15       <div 
     16         className={`fixed inset-0 bg-black/50 z-40 transition-opacity duration-300 ${
     17           isOpen ? 'opacity-100' : 'opacity-0 pointer-events-none'
     18         }`}
     19         onClick={onClose}
     20       />
     21       <div 
     22         className={`fixed top-0 right-0 h-full w-[75vw] sm:w-90 bg-(--background) shadow-2xl z-50 transform transition-transform duration-300 ease-in-out border-l border-muted ${
     23           isOpen ? 'translate-x-0' : 'translate-x-full'
     24         }`}
     25       >
     26         <div className="flex flex-col text-foreground">
     27           <div className="flex-1 overflow-y-auto p-1">
     28             {children}
     29           </div>
     30         </div>
     31       </div>
     32     </>
     33   );
     34 };
     35 
     36 export default SidePanel;