View-options menu

'use client';

import { useState } from 'react';
import {
  Menu,
  MenuTrigger,
  MenuContent,
  MenuLabel,
  MenuCheckboxItem,
  MenuRadioGroup,
  MenuRadioItem,
  MenuSeparator,
} from '@hey-mike/tungsten';

const triggerClass =
  'border-stroke bg-surface text-ink-1 hover:bg-surface-2 rounded-lg border px-4 py-2 text-sm font-medium transition-colors';

export default function MenuViewOptionsRecipe() {
  const [grid, setGrid] = useState(true);
  const [ruler, setRuler] = useState(false);
  const [density, setDensity] = useState('comfortable');

  return (
    <Menu defaultOpen>
      <MenuTrigger className={triggerClass}>View</MenuTrigger>
      <MenuContent>
        <MenuLabel>Show</MenuLabel>
        <MenuCheckboxItem checked={grid} onCheckedChange={setGrid}>
          Grid
        </MenuCheckboxItem>
        <MenuCheckboxItem checked={ruler} onCheckedChange={setRuler}>
          Ruler
        </MenuCheckboxItem>
        <MenuSeparator />
        <MenuLabel>Density</MenuLabel>
        <MenuRadioGroup value={density} onValueChange={setDensity}>
          <MenuRadioItem value="comfortable">Comfortable</MenuRadioItem>
          <MenuRadioItem value="compact">Compact</MenuRadioItem>
        </MenuRadioGroup>
      </MenuContent>
    </Menu>
  );
}