Glass Popover

1"use client";
2 
3import { Menu as MenuPrimitive } from "@base-ui/react/menu";
4import { GlassSurface } from "@/components/ui/glass-surface";
5import { cn } from "@/lib/utils";
6import type { ReactNode } from "react";
7 
8const GlassPopover = MenuPrimitive.Root;
9const GlassPopoverTrigger = MenuPrimitive.Trigger;
10 
11interface GlassPopoverContentProps extends MenuPrimitive.Popup.Props {
12  align?: MenuPrimitive.Positioner.Props["align"];
13  side?: MenuPrimitive.Positioner.Props["side"];
14  sideOffset?: number;
15  tint?: number;
16  tintColor?: string;
17}
18 
19function GlassPopoverContent({
20  align = "start",
21  side = "bottom",
22  sideOffset = 10,
23  tint = 0.55,
24  tintColor,
25  className,
26  children,
27  ...props
28}: GlassPopoverContentProps) {
29  return (
30    <MenuPrimitive.Portal>
31      <MenuPrimitive.Positioner
32        align={align}
33        className="z-50 outline-none"
34        side={side}
35        sideOffset={sideOffset}
36      >
37        <MenuPrimitive.Popup
38          className={cn(
39            "origin-[var(--transform-origin)] outline-none transition-[scale,opacity] duration-300 ease-[cubic-bezier(0.34,1.3,0.64,1)] data-[ending-style]:scale-95 data-[ending-style]:opacity-0 data-[ending-style]:duration-150 data-[ending-style]:ease-out data-[starting-style]:scale-[0.6]",
40            className
41          )}
42          {...props}
43        >
44          <GlassSurface
45            blur={30}
46            radius={26}
47            tint={tint}
48            tintColor={tintColor}
49          >
50            <div className="min-w-[230px] py-2.5">{children}</div>
51          </GlassSurface>
52        </MenuPrimitive.Popup>
53      </MenuPrimitive.Positioner>
54    </MenuPrimitive.Portal>
55  );
56}
57 
58interface GlassPopoverItemProps extends MenuPrimitive.Item.Props {
59  destructive?: boolean;
60  icon?: ReactNode;
61  label: string;
62  sublabel?: string;
63}
64 
65function GlassPopoverItem({
66  destructive = false,
67  icon,
68  label,
69  sublabel,
70  className,
71  ...props
72}: GlassPopoverItemProps) {
73  return (
74    <MenuPrimitive.Item
75      className={cn(
76        "mx-2.5 flex cursor-pointer select-none items-center gap-4 rounded-[14px] px-3 py-2.5 text-[#1d1d1f] outline-none data-[highlighted]:bg-black/8 dark:text-[#f5f5f7] dark:data-[highlighted]:bg-white/12",
77        destructive && "text-[#e5484d] dark:text-[#ff6369]",
78        className
79      )}
80      label={label}
81      {...props}
82    >
83      {icon ? (
84        <span className="inline-flex w-6 shrink-0 items-center justify-center [&_svg]:size-5">
85          {icon}
86        </span>
87// … truncated