blob: b4aae9c3691580cff100613e56e50d2d35ac2956 (
plain) (
blame)
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
|
"use client";
import Image from "next/image";
import type React from "react";
import type { TwitchChannelDataProp } from "./TwitchDataTable";
interface TwitchRowProps {
channel: TwitchChannelDataProp;
index: number;
}
const TwitchTableRow: React.FC<TwitchRowProps> = ({ channel, index }) => (
<tr
key={index}
className="border-b hover:bg-gray-100 cursor-pointer"
onClick={() => (window.location.href = "/stats/" + channel.channel_name)}
>
<td className="py-3 px-1 sm:px-3 hidden sm:table-cell">{index + 1}</td>
<td className="py-3 px-1 sm:px-3 flex items-center">
<Image
src={channel.profile_pic}
alt={channel.channel_name}
width={50}
height={50}
className="rounded-full"
/>
<span className="ml-2 hidden sm:block">{channel.channel_name}</span>
<span className="ml-2 sm:hidden">{
(() => {
const words = channel.channel_name.split(' ');
if (words.length >= 2) {
return `${words[0][0]}.${words[1][0]}`;
} else if (words.length === 1) {
return `${words[0][0]}.`;
}
return '';
})()
}</span>
</td>
<td className="py-3 px-1 sm:px-3 hidden sm:table-cell">
{channel.sub_org}
</td>
<td className="py-3 px-1 sm:px-3">
{Number(channel.subscribers).toLocaleString()}
</td>
<td className="py-3 px-1 sm:px-3">
{Number(channel.twitch_followers).toLocaleString()}
</td>
<td className="py-3 px-1 sm:px-3 hidden sm:table-cell">
{Number(channel.total_sum).toLocaleString()}
</td>
<td className="py-2 px-3 font-bold">
{channel.max_following !== undefined && (
<span
className={
channel.twitch_followers > channel.subscribers
? "text-purple-500" // Twitch color
: channel.subscribers > channel.twitch_followers
? "text-red-600" // YouTube color
: ""
}
>
{channel.max_following.toLocaleString() || "0"}
</span>
)}
</td>
</tr>
);
export default TwitchTableRow;
|
