File, Edit and View

// apps/docs/examples/ui/menubar.tsx'use client';
import {useState} from 'react';
import {  Menubar,  MenubarCheckboxItem,  MenubarContent,  MenubarItem,  MenubarMenu,  MenubarRadioGroup,  MenubarRadioItem,  MenubarSeparator,  MenubarSub,  MenubarSubContent,  MenubarSubTrigger,  MenubarTrigger,} from '@workspace/active-ui/components/primitives/menubar';
/** * The menus of an editor-like screen in one bar. With one menu open, moving * the pointer or the arrow keys to the next title opens that menu instead. */export default function MenubarExample() {  const [last, setLast] = useState('nothing yet');  const [grid, setGrid] = useState(true);  const [density, setDensity] = useState('comfortable');  return (    <div className="flex flex-col items-center gap-4">      <Menubar aria-label="Report editor">        <MenubarMenu>          <MenubarTrigger>File</MenubarTrigger>          <MenubarContent>            <MenubarItem onClick={() => setLast('New report')}>              New report            </MenubarItem>            <MenubarItem onClick={() => setLast('Duplicate')}>              Duplicate            </MenubarItem>            <MenubarSub>              <MenubarSubTrigger>Export</MenubarSubTrigger>              <MenubarSubContent>                <MenubarItem onClick={() => setLast('Export as CSV')}>                  CSV                </MenubarItem>                <MenubarItem onClick={() => setLast('Export as PDF')}>                  PDF                </MenubarItem>              </MenubarSubContent>            </MenubarSub>            <MenubarSeparator />            <MenubarItem disabled>Print (not available)</MenubarItem>          </MenubarContent>        </MenubarMenu>        <MenubarMenu>          <MenubarTrigger>Edit</MenubarTrigger>          <MenubarContent>            <MenubarItem onClick={() => setLast('Undo')}>Undo</MenubarItem>            <MenubarItem onClick={() => setLast('Redo')}>Redo</MenubarItem>          </MenubarContent>        </MenubarMenu>        <MenubarMenu>          <MenubarTrigger>View</MenubarTrigger>          <MenubarContent>            <MenubarCheckboxItem checked={grid} onCheckedChange={setGrid}>              Show grid lines            </MenubarCheckboxItem>            <MenubarSeparator />            <MenubarRadioGroup value={density} onValueChange={setDensity}>              <MenubarRadioItem value="comfortable">                Comfortable              </MenubarRadioItem>              <MenubarRadioItem value="compact">Compact</MenubarRadioItem>            </MenubarRadioGroup>          </MenubarContent>        </MenubarMenu>      </Menubar>      <p className="text-muted-foreground text-sm" aria-live="polite">        Last action: {last} · grid {grid ? 'on' : 'off'} · {density}      </p>    </div>  );}