Slide-in Drawer

export function Drawer({ open, onClose, children }) {
  return (
    <div className={`fixed inset-0 z-50 ${open ? "" : "pointer-events-none"}`}>
      <div
        onClick={onClose}
        className={`absolute inset-0 bg-black/30 transition-opacity ${open ? "opacity-100" : "opacity-0"}`}
      />
      <div
        className={`absolute right-0 top-0 h-full w-80 bg-white shadow-xl transition-transform
          ${open ? "translate-x-0" : "translate-x-full"}`}
      >
        <div className="p-6">{children}</div>
      </div>
    </div>
  );
}