quarterly-report.pdf
Right-click for actions
Context Menu
tsx
"use client";import { ContextMenu } from "@/components/godui/context-menu";import { FileText, Pencil, Copy, Share2, Trash2 } from "lucide-react";import { useState } from "react";export function FileContextMenu() {const [last, setLast] = useState(null);const items = [ { type: "label", label: "quarterly-report.pdf" }, { label: "Open", icon: <FileText className="size-4" />, shortcut: "↵", onSelect: () => setLast("Open") }, { label: "Rename", icon: <Pencil className="size-4" />, shortcut: "⌘R", onSelect: () => setLast("Rename") }, { type: "separator" }, { label: "Copy link", icon: <Copy className="size-4" />, shortcut: "⌘C", onSelect: () => setLast("Copy") }, { label: "Share", icon: <Share2 className="size-4" />, onSelect: () => setLast("Share") }, { type: "separator" }, { label: "Delete", icon: <Trash2 className="size-4" />, destructive: true, shortcut: "⌫", onSelect: () => setLast("Delete") },];return ( <ContextMenu items={items}> <div className="rounded-xl border border-dashed p-10">Right-click here</div> </ContextMenu>);}