Menu

import { Button, Menu, MenuItem, MenuTrigger } from "pigment-ui";

function MenuDemo() {
  return (
    <MenuTrigger>
      <Button>Click me</Button>
      <Menu onAction={alert} className="w-64">
        <MenuItem id="open">Open</MenuItem>
        <MenuItem id="rename">Rename…</MenuItem>
        <MenuItem id="duplicate">Duplicate</MenuItem>
        <MenuItem id="share">Share…</MenuItem>
        <MenuItem id="delete">Delete…</MenuItem>
      </Menu>
    </MenuTrigger>
  );
}

import { Menu, MenuItem, MenuTrigger } from "pigment-ui";

function MenuColor() {
  const renderMenuContent = (
    <>
      <MenuItem id="open">Open</MenuItem>
      <MenuItem id="rename">Rename…</MenuItem>
      <MenuItem id="duplicate">Duplicate</MenuItem>
      <MenuItem id="share">Share…</MenuItem>
      <MenuItem id="delete">Delete…</MenuItem>
    </>
  );

  return (
    <div className="flex flex-wrap gap-4">
      <MenuTrigger>
        <Button color="default">Color default</Button>
        <Menu color="default" onAction={alert} className="w-64">
          {renderMenuContent}
        </Menu>
      </MenuTrigger>

      <MenuTrigger>
        <Button color="primary">Color primary</Button>
        <Menu color="primary" onAction={alert} className="w-64">
          {renderMenuContent}
        </Menu>
      </MenuTrigger>

      <MenuTrigger>
        <Button color="info">Color info</Button>
        <Menu color="info" onAction={alert} className="w-64">
          {renderMenuContent}
        </Menu>
      </MenuTrigger>

      <MenuTrigger>
        <Button color="success">Color success</Button>
        <Menu color="success" onAction={alert} className="w-64">
          {renderMenuContent}
        </Menu>
      </MenuTrigger>

      <MenuTrigger>
        <Button color="warning">Color warning</Button>
        <Menu color="warning" onAction={alert} className="w-64">
          {renderMenuContent}
        </Menu>
      </MenuTrigger>

      <MenuTrigger>
        <Button color="error">Color error</Button>
        <Menu color="error" onAction={alert} className="w-64">
          {renderMenuContent}
        </Menu>
      </MenuTrigger>
    </div>
  );
}

import { Button, Menu, MenuItem, MenuTrigger } from "pigment-ui";

function MenuIndividual() {
  return (
    <MenuTrigger>
      <Button>Click me</Button>
      <Menu color="info" onAction={alert} className="w-64">
        <MenuItem id="open">Open</MenuItem>
        <MenuItem id="rename">Rename…</MenuItem>
        <MenuItem id="duplicate">Duplicate</MenuItem>
        <MenuItem id="share">Share…</MenuItem>
        <MenuItem id="delete" color="error">Delete…</MenuItem>
      </Menu>
    </MenuTrigger>
  );
}

import { Menu, MenuItem, MenuTrigger } from "pigment-ui";

function MenuSize() {
  const renderMenuContent = (
    <>
      <MenuItem id="open">Open</MenuItem>
      <MenuItem id="rename">Rename…</MenuItem>
      <MenuItem id="duplicate">Duplicate</MenuItem>
      <MenuItem id="share">Share…</MenuItem>
      <MenuItem id="delete">Delete…</MenuItem>
    </>
  );

  return (
    <div className="flex flex-wrap gap-4">
      <MenuTrigger>
        <Button>Size sm</Button>
        <Menu size="sm" onAction={alert} className="w-64">
          {renderMenuContent}
        </Menu>
      </MenuTrigger>

      <MenuTrigger>
        <Button>Size md</Button>
        <Menu size="md" onAction={alert} className="w-64">
          {renderMenuContent}
        </Menu>
      </MenuTrigger>

      <MenuTrigger>
        <Button>Size lg</Button>
        <Menu size="lg" onAction={alert} className="w-64">
          {renderMenuContent}
        </Menu>
      </MenuTrigger>
    </div>
  );
}

import { Button, Menu, MenuItem, MenuTrigger } from "pigment-ui";
import { TrashIcon, ShareIcon } from "lucide-react";

function MenuContent() {
  return (
    <MenuTrigger>
      <Button>Click me</Button>
      <Menu onAction={alert} className="w-64">
        <MenuItem id="open">Open</MenuItem>
        <MenuItem id="rename">Rename…</MenuItem>
        <MenuItem id="duplicate">Duplicate</MenuItem>
        <MenuItem endContent={<ShareIcon />} id="share">Share…</MenuItem>
        <MenuItem startContent={<TrashIcon />} color="error" id="delete">Delete…</MenuItem>
      </Menu>
    </MenuTrigger>
  );
}

import { Button, Menu, MenuItem, MenuTrigger } from "pigment-ui";

function MenuDisabled() {
  return (
    <MenuTrigger>
      <Button>Click me</Button>
      <Menu disabledKeys={["delete"]} onAction={alert} className="w-64">
        <MenuItem id="open">Open</MenuItem>
        <MenuItem id="rename">Rename…</MenuItem>
        <MenuItem id="duplicate">Duplicate</MenuItem>
        <MenuItem id="share">Share…</MenuItem>
        <MenuItem id="delete">Delete…</MenuItem>
      </Menu>
    </MenuTrigger>
  );
}