Context menu

"use client";import { FilePdfIcon } from "@phosphor-icons/react";import { Button } from "@/components/vip-ui/button";import {  ContextMenu,  ContextMenuItem,  ContextMenuTrigger,} from "@/components/vip-ui/context-menu";export function ContextMenuDemo() {  return (    <div className="grid justify-items-center gap-3">      <ContextMenuTrigger>        <Button variant="outline">          <FilePdfIcon size={18} aria-hidden="true" /> brief.pdf        </Button>        <ContextMenu aria-label="File actions">          <ContextMenuItem>Rename</ContextMenuItem>          <ContextMenuItem>Copy filename</ContextMenuItem>        </ContextMenu>      </ContextMenuTrigger>      <p className="text-xs text-muted-foreground">        Right-click or long-press the file.      </p>    </div>  );}

"use client";import { FileMdIcon } from "@phosphor-icons/react";import { Button } from "@/components/vip-ui/button";import {  ContextMenuContent,  ContextMenuItem,  ContextMenuPopover,  ContextMenuSeparator,  ContextMenuTrigger,} from "@/components/vip-ui/context-menu";export function ContextMenuGroupedDemo() {  return (    <ContextMenuTrigger>      <Button variant="outline">        <FileMdIcon size={18} aria-hidden="true" /> Notes.md      </Button>      <ContextMenuPopover>        <ContextMenuContent aria-label="Notes actions">          <ContextMenuItem>Open</ContextMenuItem>          <ContextMenuItem>Rename</ContextMenuItem>          <ContextMenuSeparator />          <ContextMenuItem>Pin notes</ContextMenuItem>          <ContextMenuItem isDisabled>Share (unavailable)</ContextMenuItem>          <ContextMenuSeparator />          <ContextMenuItem>Delete</ContextMenuItem>        </ContextMenuContent>      </ContextMenuPopover>    </ContextMenuTrigger>  );}