buster/web/src/layouts/ChatLayout/ChatContainer/ChatContent/MessageContainer.tsx

38 lines
1.0 KiB
TypeScript

import { Avatar } from '@/components/ui/avatar';
import { cn } from '@/lib/classMerge';
import React, { forwardRef } from 'react';
interface MessageContainerProps {
children: React.ReactNode;
senderName?: string;
senderId?: string;
senderAvatar?: string | null;
className?: string;
onMouseEnter?: () => void;
onMouseLeave?: () => void;
}
export const MessageContainer = forwardRef<HTMLDivElement, MessageContainerProps>(
(
{ children, senderName, senderId, senderAvatar, className = '', onMouseEnter, onMouseLeave },
ref
) => {
return (
<div
ref={ref}
className={'flex w-full space-x-2'}
onMouseEnter={onMouseEnter}
onMouseLeave={onMouseLeave}>
{senderName ? (
<Avatar size={24} name={senderName} image={senderAvatar || ''} useToolTip={true} />
) : (
<Avatar size={24} />
)}
<div className={cn('relative mt-1 w-full px-1', className)}>{children}</div>
</div>
);
}
);
MessageContainer.displayName = 'MessageContainer';