27 lines
1.3 KiB
JavaScript
27 lines
1.3 KiB
JavaScript
import React from "react";
|
|
|
|
export default function Message(props) {
|
|
if (props.type === "system") {
|
|
return (
|
|
<div className={`message-system ${props.className} bg-[#0f0f0f] border-l-4 pl-4 pr-4 py-3 mb-4 text-sm`}>
|
|
<div className={`system-label ${props.className} text-xs uppercase tracking-wider font-bold mb-1`}>[{props.label}] System Announcement</div>
|
|
<div>{props.text}</div>
|
|
</div>
|
|
);
|
|
}
|
|
return (
|
|
<div className="message flex gap-4 mb-5 p-3 rounded transition hover:bg-[#0f0f0f]">
|
|
<div className={`message-avatar w-10 h-10 rounded-full flex items-center justify-center font-bold text-base flex-shrink-0 bg-gradient-to-tr ${props.avatarBg}`}>{props.avatar}</div>
|
|
<div className="message-content flex-1">
|
|
<div className="message-header flex items-baseline gap-3 mb-1">
|
|
<span className="message-author font-bold">{props.author}</span>
|
|
{props.badge && (
|
|
<span className={`message-badge ${props.className} text-xs px-2 py-1 rounded uppercase tracking-wider font-bold`}>{props.badge}</span>
|
|
)}
|
|
<span className="message-time text-xs text-gray-500">{props.time}</span>
|
|
</div>
|
|
<div className="message-text leading-relaxed text-gray-300">{props.text}</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|