Chat Menu

1"use client";
2 
3import * as React from "react";
4import { Menu } from "@base-ui/react/menu";
5import { cn } from "@/lib/utils";
6import "@/components/ui/whatsapp/styles/whatsapp.css";
7 
8export interface ChatMenuItem {
9  label: string;
10  icon?: React.ReactNode;
11  /** Render item as <a> — base-ui MenuLinkItem */
12  href?: string;
13  onClick?: () => void;
14  danger?: boolean;
15  disabled?: boolean;
16}
17 
18export interface ChatMenuProps {
19  items: ChatMenuItem[];
20  /** Trigger element — defaults to ⋮ (three-dot) icon button */
21  trigger?: React.ReactNode;
22  className?: string;
23}
24 
25/**
26 * WhatsApp-style context menu using @base-ui/react Menu.
27 *
28 * @example
29 * <ChatMenu items={[
30 *   { label: "새 그룹", icon: <GroupIcon />, onClick: () => {} },
31 *   { label: "별표 메시지", onClick: () => {} },
32 *   { label: "로그아웃", danger: true, onClick: () => {} },
33 * ]} />
34 */
35function ChatMenu({ items, trigger, className }: ChatMenuProps) {
36  return (
37    <Menu.Root>
38      <Menu.Trigger
39        className={cn(
40          "flex h-9 w-9 items-center justify-center rounded-full text-wa-icon-default",
41          "transition-colors hover:bg-wa-hover",
42          className
43        )}
44        aria-label="Menu"
45      >
46        {trigger ?? (
47          <svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor">
48            <path d="M12 7a2 2 0 1 0-.001-4.001A2 2 0 0 0 12 7zm0 2a2 2 0 1 0-.001 3.999A2 2 0 0 0 12 9zm0 6a2 2 0 1 0-.001 3.999A2 2 0 0 0 12 15z" />
49          </svg>
50        )}
51      </Menu.Trigger>
52 
53      <Menu.Portal>
54        <Menu.Positioner side="bottom" align="end" sideOffset={4}>
55          <Menu.Popup
56            className={cn(
57              "font-wa min-w-[200px] overflow-hidden rounded-lg bg-wa-panel-bg shadow-[0_4px_20px_rgba(11,20,26,0.3)]",
58              "outline-none",
59              "data-[starting-style]:opacity-0 data-[starting-style]:scale-95",
60              "data-[ending-style]:opacity-0 data-[ending-style]:scale-95",
61              "transition-[opacity,transform] duration-150 ease-out"
62            )}
63          >
64            {items.map((item, i) => {
65              const itemClass = cn(
66                "flex w-full cursor-pointer items-center gap-3 px-4 py-[13px]",
67                "text-[15px] text-wa-text-primary outline-none select-none",
68                "transition-colors hover:bg-wa-hover data-[highlighted]:bg-wa-hover",
69                item.danger && "text-wa-text-critical",
70                item.disabled && "cursor-not-allowed opacity-40"
71// … truncated