Menu

"use client";
import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Menu, MenuPopup, MenuItem, MenuTrigger } from "@/components/ui/component";
export default function MenuCloseOnClickDemo() {
  const [lastAction, setLastAction] = useState<string | null>(null);
  return (
    <div className="flex min-h-screen w-full items-center justify-center bg-black p-8 flex-col gap-4">
      <Menu>
        <MenuTrigger render={<Button variant="outline">Actions</Button>} />
        <MenuPopup>
          <MenuItem onSelect={() => setLastAction("Copy")}>Copy</MenuItem>
          <MenuItem onSelect={() => setLastAction("Cut")}>Cut</MenuItem>
          <MenuItem onSelect={() => setLastAction("Paste")}>Paste</MenuItem>
          <MenuItem onSelect={() => setLastAction("Delete")} variant="destructive">Delete</MenuItem>
        </MenuPopup>
      </Menu>
      {lastAction && (
        <p className="text-sm text-muted-foreground">Last action: <span className="text-foreground font-medium">{lastAction}</span></p>
      )}
    </div>
  );
}