Menu

import { MenuContainer, MenuButton, Menu, MenuItem } from "@/components/ui/menu";

const MoreHorizontal = () => (
  <svg
    height="16"
    strokeLinejoin="round"
    viewBox="0 0 16 16"
    width="16"
  >
    <path
      fillRule="evenodd"
      clipRule="evenodd"
      d="M4 8C4 8.82843 3.32843 9.5 2.5 9.5C1.67157 9.5 1 8.82843 1 8C1 7.17157 1.67157 6.5 2.5 6.5C3.32843 6.5 4 7.17157 4 8ZM9.5 8C9.5 8.82843 8.82843 9.5 8 9.5C7.17157 9.5 6.5 8.82843 6.5 8C6.5 7.17157 7.17157 6.5 8 6.5C8.82843 6.5 9.5 7.17157 9.5 8ZM13.5 9.5C14.3284 9.5 15 8.82843 15 8C15 7.17157 14.3284 6.5 13.5 6.5C12.6716 6.5 12 7.17157 12 8C12 8.82843 12.6716 9.5 13.5 9.5Z"
    />
  </svg>
);

const Accessibility = () => (
  <svg
    height="16"
    strokeLinejoin="round"
    viewBox="0 0 16 16"
    width="16"
  >
    <path
      d="M8 3C8.82843 3 9.5 2.32843 9.5 1.5C9.5 0.671573 8.82843 0 8 0C7.17157 0 6.5 0.671573 6.5 1.5C6.5 2.32843 7.17157 3 8 3Z"
    />
    <path
      d="M4.67148 6C5.89632 6 6.83343 7.09104 6.64857 8.30185L6.43 9.73346C6.3381 10.2159 6.1906 10.6874 6 11.1401L4.33 15.2L5.92164 15.888L7.594 11.9162C7.72668 11.6011 8.27332 11.6011 8.406 11.9162L10.0784 15.888L11.67 15.2L10 11.1401C9.8094 10.6874 9.6619 10.2159 9.57 9.73346L9.2835 8.42904C9.00946 7.18131 9.95947 6 11.2369 6H14V4.5H2V6H4.67148Z"
    />
  </svg>
);

export default function PrefixAndSuffixDemo() {
  return (
        <div className="flex gap-4">
          <MenuContainer>
            <MenuButton
              aria-label="Menu"
              shape="square"
              size="small"
              svgOnly
              type="secondary"
            >
              <MoreHorizontal />
            </MenuButton>
            <Menu>
              <MenuItem prefix={<Accessibility />}>Left</MenuItem>
              <MenuItem prefix={<Accessibility />}>Center</MenuItem>
              <MenuItem prefix={<Accessibility />}>Right</MenuItem>
            </Menu>
          </MenuContainer>
          <MenuContainer>
            <MenuButton
              aria-label="Menu"
              shape="square"
              size="small"
              svgOnly
              type="secondary"
            >
              <MoreHorizontal />
            </MenuButton>
            <Menu>
              <MenuItem suffix={<Accessibility />}>Left</MenuItem>
              <MenuItem suffix={<Accessibility />}>Center</MenuItem>
              <MenuItem suffix={<Accessibility />}>Right</MenuItem>
            </Menu>
          </MenuContainer>
        </div>
  );
}