Spaces:
Sleeping
Sleeping
File size: 3,699 Bytes
fdc7871 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 | import React from 'react';
import { Users, Search } from 'lucide-react';
import ChatterOrbit from './ChatterOrbit';
export default function ChattersTab({
chatters,
chattersSearch,
setChattersSearch,
TWITCH_CHANNEL
}) {
return (
<div className="grid-2col tab-content" style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(340px, 1fr))', gap: '1.5rem', alignItems: 'start' }}>
<div className="panel">
<div className="panel-header">
<h3 className="panel-title"><Users size={20} /> Орбита зрителей</h3>
</div>
<div style={{ display: 'flex', justifyContent: 'center', padding: '1rem 0' }}>
<ChatterOrbit chatters={chatters} />
</div>
</div>
<div className="panel">
<div className="panel-header">
<h3 className="panel-title"><Users size={20} /> Лидеры чата по активности</h3>
<div className="search-container">
<Search size={16} className="search-icon" />
<input
type="text"
className="search-input"
placeholder="Поиск зрителя..."
value={chattersSearch}
onChange={(e) => setChattersSearch(e.target.value)}
/>
</div>
</div>
{chatters.length === 0 ? (
<div className="status-msg">
<Users size={40} className="status-msg-icon" />
<p>Нет данных о зрителях для этого периода</p>
</div>
) : (
<div className="table-wrapper">
<table className="data-table">
<thead>
<tr>
<th>Место</th>
<th>Никнейм</th>
<th>Роли</th>
<th>Сообщений</th>
</tr>
</thead>
<tbody>
{chatters
.filter(c => {
const disp = c.display_name || c.username || '';
const user = c.username || '';
return disp.toLowerCase().includes(chattersSearch.toLowerCase()) ||
user.toLowerCase().includes(chattersSearch.toLowerCase());
})
.map((c, idx) => (
<tr key={idx} className="chatter-row">
<td style={{ fontWeight: 700, width: '80px', color: idx < 3 ? 'var(--color-brand)' : 'var(--color-text-muted)' }}>
#{idx + 1}
</td>
<td style={{ fontWeight: 600 }}>{c.display_name || c.username || '—'}</td>
<td>
<div style={{ display: 'flex', gap: '0.4rem' }}>
{(c.username || '').toLowerCase() === TWITCH_CHANNEL && (
<span className="badge badge-streamer">Стример</span>
)}
{c.is_mod ? <span className="badge badge-mod">Мод</span> : null}
{c.is_vip && !c.is_mod ? <span className="badge badge-vip">VIP</span> : null}
{c.is_sub && !c.is_mod && !c.is_vip ? <span className="badge badge-sub">Саб</span> : null}
</div>
</td>
<td style={{ fontWeight: 700, color: 'var(--color-text-accent)' }}>
{c.message_count.toLocaleString()}
</td>
</tr>
))}
</tbody>
</table>
</div>
)}
</div>
</div>
);
}
|