45 lines
1.3 KiB
JavaScript
45 lines
1.3 KiB
JavaScript
/**
|
|
* TypingIndicator Component
|
|
* Shows animated typing indicator with user names
|
|
*/
|
|
|
|
import React from 'react';
|
|
import './TypingIndicator.css';
|
|
|
|
export default function TypingIndicator({ typingUsers, maxDisplay = 3 }) {
|
|
if (!typingUsers || typingUsers.length === 0) {
|
|
return null;
|
|
}
|
|
|
|
const displayUsers = typingUsers.slice(0, maxDisplay);
|
|
const hiddenCount = typingUsers.length - maxDisplay;
|
|
|
|
const getTypingText = () => {
|
|
if (displayUsers.length === 1) {
|
|
return `${displayUsers[0]} is typing`;
|
|
}
|
|
if (displayUsers.length === 2) {
|
|
return `${displayUsers[0]} and ${displayUsers[1]} are typing`;
|
|
}
|
|
if (displayUsers.length === 3) {
|
|
return `${displayUsers[0]}, ${displayUsers[1]}, and ${displayUsers[2]} are typing`;
|
|
}
|
|
return `${displayUsers.join(', ')}, and ${hiddenCount} more are typing`;
|
|
};
|
|
|
|
return (
|
|
<div className="typing-indicator-container">
|
|
<div className="typing-indicator-avatar">
|
|
{displayUsers[0]?.[0]?.toUpperCase() || '?'}
|
|
</div>
|
|
<div className="typing-indicator-content">
|
|
<div className="typing-dots">
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
</div>
|
|
<span className="typing-text">{getTypingText()}</span>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|