Menu

import { useT } from '@iffday/i18n';
import { Button, Menu, MenuItem, MenuLabel, MenuLinkItem, MenuSeparator } from '@iffday/ui';
import { useApp } from '@iffday/web/src/state';
import { Link } from '@iffday/web/src/router';
import { Ellipsis, Flag, PenLine, Trash2 } from 'lucide-react';

export default function Example() {
  const t = useT();
  const { notify } = useApp();
  return (
    <Menu
      align="end"
      label={t('review.card.reviewActions')}
      trigger={
        <Button type="button" className="icon-button" aria-label={t('review.card.reviewActions')}>
          <Ellipsis size={18} />
        </Button>
      }
    >
      <MenuLabel>{t('review.card.reviewActions')}</MenuLabel>
      <MenuItem onClick={() => notify(t('common.saved'))}>
        <PenLine size={16} />
        {t('common.edit')}
      </MenuItem>
      <MenuItem onClick={() => notify(t('review.card.reviewWithdrawn'))}>
        <Trash2 size={16} />
        {t('review.card.withdrawMyReview')}
      </MenuItem>
      <MenuSeparator />
      <MenuItem onClick={() => notify(t('review.card.reportSubmitted'))}>
        <Flag size={16} />
        {t('review.card.report')}
      </MenuItem>
      <MenuLinkItem render={<Link to="/components/dialog" />}>Dialog</MenuLinkItem>
    </Menu>
  );
}