Files
outline/app/menus/MemberMenu.tsx

43 lines
1.1 KiB
TypeScript

import * as React from "react";
import { useTranslation } from "react-i18next";
import { useMenuState } from "reakit/Menu";
import User from "~/models/User";
import ContextMenu from "~/components/ContextMenu";
import OverflowMenuButton from "~/components/ContextMenu/OverflowMenuButton";
import Template from "~/components/ContextMenu/Template";
import useCurrentUser from "~/hooks/useCurrentUser";
type Props = {
user: User;
onRemove: () => void;
};
function MemberMenu({ user, onRemove }: Props) {
const { t } = useTranslation();
const currentUser = useCurrentUser();
const menu = useMenuState({
modal: true,
});
return (
<>
<OverflowMenuButton aria-label={t("Show menu")} {...menu} />
<ContextMenu {...menu} aria-label={t("Member options")}>
<Template
{...menu}
items={[
{
type: "button",
title: currentUser.id === user.id ? t("Leave") : t("Remove"),
dangerous: true,
onClick: onRemove,
},
]}
/>
</ContextMenu>
</>
);
}
export default MemberMenu;