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
2022-08-31 21:44:33 +02:00

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 right-6 -top-8 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>
)
}