36 lines
1.1 KiB
TypeScript
36 lines
1.1 KiB
TypeScript
'use client';
|
|
|
|
import type { ChatMessageReaction } from '@/lib/api';
|
|
import { cn } from '@/lib/utils';
|
|
|
|
interface ChatMessageReactionsProps {
|
|
reactions?: ChatMessageReaction[];
|
|
onToggle?: (emoji: string) => void;
|
|
compact?: boolean;
|
|
}
|
|
|
|
export function ChatMessageReactions({ reactions, onToggle, compact }: ChatMessageReactionsProps) {
|
|
if (!reactions?.length) return null;
|
|
|
|
return (
|
|
<div className={cn('flex flex-wrap gap-1', compact ? 'mt-1' : 'mt-1.5')}>
|
|
{reactions.map((reaction) => (
|
|
<button
|
|
key={reaction.emoji}
|
|
type="button"
|
|
onClick={() => onToggle?.(reaction.emoji)}
|
|
className={cn(
|
|
'inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-xs transition',
|
|
reaction.reactedByMe
|
|
? 'border-[#3390ec]/40 bg-[#3390ec]/15 text-[#1f2430]'
|
|
: 'border-[#dce3ec] bg-white/80 text-[#667085] hover:bg-white'
|
|
)}
|
|
>
|
|
<span>{reaction.emoji}</span>
|
|
<span>{reaction.count}</span>
|
|
</button>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|