Menu

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

export default function MenuPositionDemo() {
  return (
        <div className="flex gap-4">
          <MenuContainer position="top-start">
            <MenuButton>Top Start</MenuButton>
            <Menu width={200}>
              <MenuItem>One</MenuItem>
              <MenuItem>Two</MenuItem>
              <MenuItem>Two</MenuItem>
              <MenuItem>Two</MenuItem>
              <MenuItem>Two</MenuItem>
            </Menu>
          </MenuContainer>
          <MenuContainer position="top-end">
            <MenuButton>Top End</MenuButton>
            <Menu width={200}>
              <MenuItem>One</MenuItem>
              <MenuItem>Two</MenuItem>
            </Menu>
          </MenuContainer>
          <MenuContainer position="right-start">
            <MenuButton>Right Start</MenuButton>
            <Menu width={200}>
              <MenuItem>One</MenuItem>
              <MenuItem>Two</MenuItem>
            </Menu>
          </MenuContainer>
          <MenuContainer position="right-end">
            <MenuButton>Right End</MenuButton>
            <Menu width={200}>
              <MenuItem>One</MenuItem>
              <MenuItem>Two</MenuItem>
            </Menu>
          </MenuContainer>
          <MenuContainer position="bottom-start">
            <MenuButton>Bottom Start</MenuButton>
            <Menu width={200}>
              <MenuItem>One</MenuItem>
              <MenuItem>Two</MenuItem>
              <MenuItem>Two</MenuItem>
              <MenuItem>Two</MenuItem>
              <MenuItem>Two</MenuItem>
            </Menu>
          </MenuContainer>
          <MenuContainer position="bottom-end">
            <MenuButton>Bottom End</MenuButton>
            <Menu width={200}>
              <MenuItem>One</MenuItem>
              <MenuItem>Two</MenuItem>
            </Menu>
          </MenuContainer>
          <MenuContainer position="left-start">
            <MenuButton>Left Start</MenuButton>
            <Menu width={200}>
              <MenuItem>One</MenuItem>
              <MenuItem>Two</MenuItem>
            </Menu>
          </MenuContainer>
          <MenuContainer position="left-end">
            <MenuButton>Left End</MenuButton>
            <Menu width={200}>
              <MenuItem>One</MenuItem>
              <MenuItem>Two</MenuItem>
            </Menu>
          </MenuContainer>
        </div>
  );
}