"use client";

import {
  Menubar,
  MenubarCheckboxItem,
  MenubarContent,
  MenubarItem,
  MenubarMenu,
  MenubarSeparator,
  MenubarShortcut,
  MenubarTrigger,
} from "@countryclub/ui-react";
import { useState } from "react";

export default function MenubarDemo() {
  const [showTeeSheet, setShowTeeSheet] = useState(true);
  const [showHandicaps, setShowHandicaps] = useState(false);

  return (
    <Menubar>
      <MenubarMenu>
        <MenubarTrigger>File</MenubarTrigger>
        <MenubarContent>
          <MenubarItem>
            New booking <MenubarShortcut>⌘N</MenubarShortcut>
          </MenubarItem>
          <MenubarItem>
            Share tee sheet <MenubarShortcut>⌘S</MenubarShortcut>
          </MenubarItem>
          <MenubarSeparator />
          <MenubarItem>
            Print scorecard <MenubarShortcut>⌘P</MenubarShortcut>
          </MenubarItem>
        </MenubarContent>
      </MenubarMenu>
      <MenubarMenu>
        <MenubarTrigger>View</MenubarTrigger>
        <MenubarContent>
          <MenubarCheckboxItem
            checked={showTeeSheet}
            onCheckedChange={setShowTeeSheet}
          >
            Show tee sheet
          </MenubarCheckboxItem>
          <MenubarCheckboxItem
            checked={showHandicaps}
            onCheckedChange={setShowHandicaps}
          >
            Show handicaps
          </MenubarCheckboxItem>
        </MenubarContent>
      </MenubarMenu>
    </Menubar>
  );
}
Menubar

Import

Default
