92 lines
3.2 KiB
JavaScript
92 lines
3.2 KiB
JavaScript
import React from 'react';
|
|
|
|
const pinnedMessages = [
|
|
{
|
|
id: 1,
|
|
author: 'Anderson',
|
|
avatar: 'A',
|
|
gradient: 'linear-gradient(135deg, #ff0000, #0066ff, #ffa500)',
|
|
badge: 'Founder',
|
|
time: 'Jan 15, 2026',
|
|
text: 'Welcome to AeThex Connect! Please read the rules in #rules and introduce yourself in #introductions. The Trinity awaits! 🔥',
|
|
pinnedBy: 'Anderson',
|
|
},
|
|
{
|
|
id: 2,
|
|
author: 'Trevor',
|
|
avatar: 'T',
|
|
gradient: 'linear-gradient(135deg, #ff0000, #cc0000)',
|
|
badge: 'Foundation',
|
|
time: 'Jan 20, 2026',
|
|
text: 'Important: Authentication v2.1.0 is now live! All users should update their Passport credentials. Check #updates for migration guide.',
|
|
pinnedBy: 'Trevor',
|
|
},
|
|
{
|
|
id: 3,
|
|
author: 'Sarah',
|
|
avatar: 'S',
|
|
gradient: 'linear-gradient(135deg, #ffa500, #ff8c00)',
|
|
badge: 'Labs',
|
|
time: 'Feb 1, 2026',
|
|
text: 'Nexus Engine v2.0 is officially out of beta! Huge thanks to everyone who helped test. Read the changelog in #changelog 🚀',
|
|
pinnedBy: 'Sarah',
|
|
},
|
|
];
|
|
|
|
export default function PinnedMessagesPanel({ channelName, onClose, onJumpToMessage }) {
|
|
return (
|
|
<div className="pinned-panel">
|
|
<div className="pinned-header">
|
|
<span className="pinned-icon">📌</span>
|
|
<span className="pinned-title">Pinned Messages</span>
|
|
<span className="pinned-channel">#{channelName || 'general'}</span>
|
|
<button className="pinned-close" onClick={onClose}>✕</button>
|
|
</div>
|
|
|
|
<div className="pinned-content">
|
|
{pinnedMessages.length === 0 ? (
|
|
<div className="pinned-empty">
|
|
<span className="empty-icon">📌</span>
|
|
<p>This channel doesn't have any pinned messages... yet.</p>
|
|
</div>
|
|
) : (
|
|
<div className="pinned-list">
|
|
{pinnedMessages.map((msg) => (
|
|
<div key={msg.id} className="pinned-message">
|
|
<div className="pinned-message-header">
|
|
<div
|
|
className="pinned-avatar"
|
|
style={{ background: msg.gradient || '#36393f' }}
|
|
>
|
|
{msg.avatar}
|
|
</div>
|
|
<div className="pinned-author-info">
|
|
<span className="pinned-author">{msg.author}</span>
|
|
{msg.badge && <span className={`pinned-badge ${msg.badge.toLowerCase()}`}>{msg.badge}</span>}
|
|
<span className="pinned-time">{msg.time}</span>
|
|
</div>
|
|
</div>
|
|
<div className="pinned-message-text">{msg.text}</div>
|
|
<div className="pinned-message-footer">
|
|
<span className="pinned-by">Pinned by {msg.pinnedBy}</span>
|
|
<button
|
|
className="jump-to-btn"
|
|
onClick={() => onJumpToMessage?.(msg)}
|
|
>
|
|
Jump
|
|
</button>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="pinned-footer">
|
|
<span className="protip">
|
|
<strong>PROTIP:</strong> You can pin up to 50 messages in a channel.
|
|
</span>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|