sforkowany z mirror/soapbox
46 wiersze
1.4 KiB
TypeScript
46 wiersze
1.4 KiB
TypeScript
import clsx from 'clsx';
|
|
import React from 'react';
|
|
|
|
import { Text } from 'soapbox/components/ui';
|
|
import emojify from 'soapbox/features/emoji';
|
|
import { EmojiReaction } from 'soapbox/types/entities';
|
|
|
|
interface IChatMessageReaction {
|
|
emojiReaction: EmojiReaction
|
|
onRemoveReaction(emoji: string): void
|
|
onAddReaction(emoji: string): void
|
|
}
|
|
|
|
const ChatMessageReaction = (props: IChatMessageReaction) => {
|
|
const { emojiReaction, onAddReaction, onRemoveReaction } = props;
|
|
|
|
const isAlreadyReacted = emojiReaction.me;
|
|
|
|
const handleClick = () => {
|
|
if (isAlreadyReacted) {
|
|
onRemoveReaction(emojiReaction.name);
|
|
} else {
|
|
onAddReaction(emojiReaction.name);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<button
|
|
type='button'
|
|
onClick={handleClick}
|
|
className={
|
|
clsx({
|
|
'w-12 rounded-lg flex justify-between text-sm border items-center border-solid text-gray-700 dark:text-gray-600 px-2 py-1 space-x-1.5 transition-colors hover:bg-gray-200 dark:hover:bg-gray-800 whitespace-nowrap': true,
|
|
'border-primary-500 dark:border-primary-400': emojiReaction.me,
|
|
'border-gray-300 dark:border-gray-800': !emojiReaction.me,
|
|
})
|
|
}
|
|
>
|
|
<span dangerouslySetInnerHTML={{ __html: emojify(emojiReaction.name) }} />
|
|
<Text tag='span' weight='medium' size='sm'>{emojiReaction.count}</Text>
|
|
</button>
|
|
);
|
|
};
|
|
|
|
export default ChatMessageReaction;
|