Dropdown Menu

import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuItemIcon,
  DropdownMenuItemTitle,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from '@/components/ui/DropdownMenu';
import { Button, ButtonIcon } from '@/components/ui/Button';
 
export function MyDropdownMenu() {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger as={Button} variant="soft" accessibilityLabel="Open menu" iconOnly>
        <ButtonIcon name="ellipsis-vertical" />
      </DropdownMenuTrigger>
      <DropdownMenuContent minWidth={240} placement="bottom-start">
        <DropdownMenuItem>
          <DropdownMenuItemIcon name="eye-outline" />
          <DropdownMenuItemTitle>View Post</DropdownMenuItemTitle>
        </DropdownMenuItem>
        <DropdownMenuItem>
          <DropdownMenuItemIcon name="bookmark-outline" />
          <DropdownMenuItemTitle>Add to list</DropdownMenuItemTitle>
        </DropdownMenuItem>
        <DropdownMenuItem>
          <DropdownMenuItemIcon name="return-up-forward-outline" />
          <DropdownMenuItemTitle>Forward</DropdownMenuItemTitle>
        </DropdownMenuItem>
        <DropdownMenuItem>
          <DropdownMenuItemIcon name="flag-outline" />
          <DropdownMenuItemTitle>Report</DropdownMenuItemTitle>
        </DropdownMenuItem>
        <DropdownMenuItem>
          <DropdownMenuItemIcon name="ban-outline" />
          <DropdownMenuItemTitle>Block</DropdownMenuItemTitle>
        </DropdownMenuItem>
        <DropdownMenuItem>
          <DropdownMenuItemIcon name="notifications-off-outline" />
          <DropdownMenuItemTitle>Mute notifications</DropdownMenuItemTitle>
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}