Actions on a file

// apps/docs/examples/ui/context-menu.tsx'use client';
import {useState} from 'react';import {FileTextIcon} from 'lucide-react';
import {  ContextMenu,  ContextMenuCheckboxItem,  ContextMenuContent,  ContextMenuGroup,  ContextMenuItem,  ContextMenuLabel,  ContextMenuSeparator,  ContextMenuTrigger,} from '@workspace/active-ui/components/primitives/context-menu';
/** * Actions on an object, opened with a right click, a long press on a touch * screen, or the context-menu key. It repeats actions that are also reachable * elsewhere: a context menu alone is hidden from readers who do not know it * is there. */export default function ContextMenuExample() {  const [last, setLast] = useState('nothing yet');  const [pinned, setPinned] = useState(false);  return (    <div className="flex w-full max-w-sm flex-col items-center gap-4">      <ContextMenu>        <ContextMenuTrigger className="border-border text-muted-foreground flex h-36 w-full flex-col items-center justify-center gap-2 rounded-md border border-dashed text-sm">          <FileTextIcon aria-hidden className="size-6" />          Statement 2026-Q3.pdf          <span className="text-xs">Right-click or long-press</span>        </ContextMenuTrigger>        <ContextMenuContent className="w-52">          <ContextMenuGroup>            <ContextMenuLabel>Statement 2026-Q3.pdf</ContextMenuLabel>            <ContextMenuItem onClick={() => setLast('Open')}>              Open            </ContextMenuItem>            <ContextMenuItem onClick={() => setLast('Download')}>              Download            </ContextMenuItem>          </ContextMenuGroup>          <ContextMenuCheckboxItem checked={pinned} onCheckedChange={setPinned}>            Pin to the top          </ContextMenuCheckboxItem>          <ContextMenuSeparator />          <ContextMenuItem            variant="destructive"            onClick={() => setLast('Delete')}          >            Delete          </ContextMenuItem>        </ContextMenuContent>      </ContextMenu>      <p className="text-muted-foreground text-sm" aria-live="polite">        Last action: {last} · {pinned ? 'pinned' : 'not pinned'}      </p>    </div>  );}