homeio

1"use client";
2
3import { cn } from "@/lib/utils";
4import { useEffect, useRef, type ReactNode } from "react";
5
6type PopoverShellProps = {
7  onClose: () => void;
8  className?: string;
9  children: ReactNode;
10};
11
12export function PopoverShell({
13  onClose,
14  className,
15  children,
16}: PopoverShellProps) {
17  const ref = useRef<HTMLDivElement>(null);
18
19  useEffect(() => {
20    function handleClick(event: MouseEvent) {
21      if (ref.current && !ref.current.contains(event.target as Node)) onClose();
22    }
23
24    document.addEventListener("mousedown", handleClick);
25    return () => document.removeEventListener("mousedown", handleClick);
26  }, [onClose]);
27
28  return (
29    <div
30      ref={ref}
31      className={cn(
32        "absolute top-full right-0 mt-4 bg-popover backdrop-blur-2xl border border-glass-border rounded-xl shadow-2xl shadow-black/50 overflow-hidden z-[200]",
33        className,
34      )}
35    >
36      {children}
37    </div>
38  );
39}
40