This repository has been archived on 2024-10-29. You can view files and clone it, but cannot push or open issues or pull requests.
website/components/Application/Messages/Message/MessageOptions/MessageOptions.tsx

45 lines
1.3 KiB
TypeScript

import useTranslation from "next-translate/useTranslation"
import { useAuthentication } from "../../../../../tools/authentication"
import { Emoji } from "../../../../Emoji"
import type { MessageProps } from "../Message"
interface MessageOptionsProps extends MessageProps {
handleEdit: () => void
editMode: ":white_check_mark:" | ":pencil2:"
}
export const MessageOptions: React.FC<
React.PropsWithChildren<MessageOptionsProps>
> = ({ handleEdit, editMode, message }) => {
const { t } = useTranslation()
const { authentication } = useAuthentication()
const handleDeleteMessage = async (): Promise<void> => {
try {
await authentication.api.delete(`/messages/${message.id}`)
} catch {}
}
return (
<div className="absolute -top-8 right-6 flex opacity-0 transition-opacity group-hover:opacity-100">
{message.type === "text" && (
<div
className="message-options rounded-l-lg border-l-slate-600"
title={t("application:edit")}
onClick={handleEdit}
>
<Emoji value={editMode} size={18} />
</div>
)}
<div
className="message-options rounded-r-lg border-r-slate-600"
title={t("application:delete")}
onClick={handleDeleteMessage}
>
<Emoji value=":wastebasket:" size={18} />
</div>
</div>
)
}