Menu

import { Cell } from "retend";

import { Button, Menu } from "innate-ui";
import classes from "../docs.module.css";

export function MenuDemo() {
  const showDetails = Cell.source(true);
  const sort = Cell.source<"recent" | "name">("recent");

  return (
    <div class={classes.stack}>
      <Menu>
        <Menu.Trigger>
          <Button>Actions</Button>
        </Menu.Trigger>
        <Menu.Content>
          <Menu.Item textValue="Duplicate">Duplicate</Menu.Item>
          <Menu.Item textValue="Archive" disabled>
            Archive
          </Menu.Item>
          <Menu.CheckboxItem
            value={showDetails}
            onChange={(value) => showDetails.set(value)}
            textValue="Show details"
          >
            Show details
          </Menu.CheckboxItem>
          <Menu.Separator />
          <Menu.RadioGroup value={sort} onChange={(value) => sort.set(value)}>
            <Menu.RadioItem value="recent" textValue="Recent first">
              Recent first
            </Menu.RadioItem>
            <Menu.RadioItem value="name" textValue="Name">
              Name
            </Menu.RadioItem>
          </Menu.RadioGroup>
          <Menu.Separator />
          <Menu.Sub>
            <Menu.SubTrigger textValue="Export">Export</Menu.SubTrigger>
            <Menu.Content>
              <Menu.Item textValue="Export PDF">PDF</Menu.Item>
              <Menu.Item textValue="Export CSV">CSV</Menu.Item>
            </Menu.Content>
          </Menu.Sub>
          <Menu.Separator />
          <Menu.Item tone="danger" textValue="Delete">
            Delete
          </Menu.Item>
        </Menu.Content>
      </Menu>

      <Menu sideOffset={2}>
        <Menu.ContextTrigger>
          <div class={classes.contextMenuTarget}>Right-click or press Shift+F10</div>
        </Menu.ContextTrigger>
        <Menu.Content>
          <Menu.Item textValue="Open">Open</Menu.Item>
          <Menu.Item textValue="Rename">Rename</Menu.Item>
          <Menu.Sub>
            <Menu.SubTrigger textValue="Open with">Open with</Menu.SubTrigger>
            <Menu.Content>
              <Menu.Item textValue="Open in browser">Browser</Menu.Item>
              <Menu.Item textValue="Open in editor">Editor</Menu.Item>
            </Menu.Content>
          </Menu.Sub>
          <Menu.Separator />
          <Menu.Item tone="danger" textValue="Remove">
            Remove
          </Menu.Item>
        </Menu.Content>
      </Menu>
    </div>
  );
}