49 lines
1.5 KiB
TypeScript
49 lines
1.5 KiB
TypeScript
'use client';
|
|
|
|
import { cn } from '@/lib/utils';
|
|
|
|
interface TypingIndicatorProps {
|
|
roomType?: string;
|
|
typers: Array<{ userId: string; userName: string }>;
|
|
className?: string;
|
|
}
|
|
|
|
function isGroupRoomType(type?: string) {
|
|
return type === 'GROUP' || type === 'GENERAL';
|
|
}
|
|
|
|
export function TypingIndicator({ roomType, typers, className }: TypingIndicatorProps) {
|
|
if (!typers.length) return null;
|
|
|
|
const group = isGroupRoomType(roomType);
|
|
let label = 'печатает';
|
|
|
|
if (group) {
|
|
if (typers.length === 1) {
|
|
label = `${typers[0]!.userName} печатает`;
|
|
} else if (typers.length === 2) {
|
|
label = `${typers[0]!.userName} и ${typers[1]!.userName} печатают`;
|
|
} else {
|
|
label = `${typers.length} участника печатают`;
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div
|
|
className={cn(
|
|
'flex items-center gap-2 px-4 py-1 text-xs text-[#667085] transition-all duration-300 animate-in fade-in slide-in-from-bottom-1',
|
|
className
|
|
)}
|
|
>
|
|
<span className="inline-flex items-center gap-1">
|
|
<span className="inline-flex gap-0.5">
|
|
<span className="h-1.5 w-1.5 animate-bounce rounded-full bg-[#3390ec]/70 [animation-delay:0ms]" />
|
|
<span className="h-1.5 w-1.5 animate-bounce rounded-full bg-[#3390ec]/70 [animation-delay:120ms]" />
|
|
<span className="h-1.5 w-1.5 animate-bounce rounded-full bg-[#3390ec]/70 [animation-delay:240ms]" />
|
|
</span>
|
|
</span>
|
|
<span>{group ? label : 'печатает…'}</span>
|
|
</div>
|
|
);
|
|
}
|