Context Menu

// demo.tsx
'use client';

import * as React from 'react';
import {
   Cloud,
   CreditCard,
   Github,
   Keyboard,
   LifeBuoy,
   LogOut,
   Mail,
   MessageSquare,
   Plus,
   PlusCircle,
   Settings,
   User,
   UserPlus,
   Users,
} from 'lucide-react';

import ContextMenu, {
   ContextMenuContent,
   ContextMenuGroup,
   ContextMenuItem,
   ContextMenuLabel,
   ContextMenuPortal,
   ContextMenuRadioGroup,
   ContextMenuRadioItem,
   ContextMenuSeparator,
   ContextMenuShortcut,
   ContextMenuSub,
   ContextMenuSubContent,
   ContextMenuSubTrigger,
   ContextMenuTrigger,
   ContextMenuCheckboxItem,
} from '@/components/ui/indevui-context-menu';

function ContextMenuDemo() {
   const [showStatusBar, setShowStatusBar] = React.useState(true);
   const [showActivityBar, setShowActivityBar] = React.useState(false);
   const [panel, setPanel] = React.useState('console');

   return (
      <div className="flex h-64 items-center justify-center">
         <ContextMenu>
            <ContextMenuTrigger className="flex h-48 w-72 items-center justify-center rounded-md border border-dashed text-sm">
               Right-click here
            </ContextMenuTrigger>
            <ContextMenuContent className="w-64">
               <ContextMenuItem inset>
                  Back
                  <ContextMenuShortcut>⌘[</ContextMenuShortcut>
               </ContextMenuItem>
               <ContextMenuItem inset disabled>
                  Forward
                  <ContextMenuShortcut>⌘]</ContextMenuShortcut>
               </ContextMenuItem>
               <ContextMenuItem inset>
                  Reload
                  <ContextMenuShortcut>⌘R</ContextMenuShortcut>
               </ContextMenuItem>
               <ContextMenuSub>
                  <ContextMenuSubTrigger inset>More Tools</ContextMenuSubTrigger>
                  <ContextMenuPortal>
                     <ContextMenuSubContent className="w-48">
                        <ContextMenuItem>
                           Save Page As...
                           <ContextMenuShortcut>⇧⌘S</ContextMenuShortcut>
                        </ContextMenuItem>
                        <ContextMenuItem>Create Shortcut...</ContextMenuItem>
                        <ContextMenuItem>Name Window...</ContextMenuItem>
                        <ContextMenuSeparator />
                        <ContextMenuItem>Developer Tools</ContextMenuItem>
                     </ContextMenuSubContent>
                  </ContextMenuPortal>
               </ContextMenuSub>
               <ContextMenuSeparator />
               <ContextMenuCheckboxItem checked={showStatusBar} onCheckedChange={setShowStatusBar}>
                  Show Status Bar
               </ContextMenuCheckboxItem>
               <ContextMenuCheckboxItem
                  checked={showActivityBar}
                  onCheckedChange={setShowActivityBar}
                  disabled
               >
                  Show Activity Bar
               </ContextMenuCheckboxItem>
               <ContextMenuSeparator />
               <ContextMenuRadioGroup value={panel} onValueChange={setPanel}>
                  <ContextMenuLabel inset>Panel</ContextMenuLabel>
                  <ContextMenuRadioItem value="console">Console</ContextMenuRadioItem>
                  <ContextMenuRadioItem value="terminal">Terminal</ContextMenuRadioItem>
                  <ContextMenuRadioItem value="output">Output</ContextMenuRadioItem>
               </ContextMenuRadioGroup>
               <ContextMenuSeparator />
               <ContextMenuItem variant="destructive" inset>
                  Delete
                  <ContextMenuShortcut>⌫</ContextMenuShortcut>
               </ContextMenuItem>
            </ContextMenuContent>
         </ContextMenu>
      </div>
   );
}

export { ContextMenuDemo as DemoOne };