blob: 38d5200b03969885bbd515c52ba142b2b9cc2e5b (
plain)
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
|
import { useAtomValue } from "jotai";
import React from "react";
import { rankingAtom } from "../../states/watch";
import CodePopover from "./CodePopover";
function TableHeaderCell({ children }: { children: React.ReactNode }) {
return (
<th scope="col" className="px-6 py-3 text-left font-medium text-gray-800">
{children}
</th>
);
}
function TableBodyCell({ children }: { children: React.ReactNode }) {
return (
<td className="px-6 py-4 whitespace-nowrap text-gray-900">{children}</td>
);
}
function formatUnixTimestamp(timestamp: number) {
const date = new Date(timestamp * 1000);
const year = date.getFullYear();
const month = (date.getMonth() + 1).toString().padStart(2, "0");
const day = date.getDate().toString().padStart(2, "0");
const hours = date.getHours().toString().padStart(2, "0");
const minutes = date.getMinutes().toString().padStart(2, "0");
return `${year}-${month}-${day} ${hours}:${minutes}`;
}
export default function RankingTable() {
const ranking = useAtomValue(rankingAtom);
return (
<div className="overflow-hidden border-2 border-blue-600 rounded-xl">
<table className="min-w-full divide-y divide-gray-400 border-collapse">
<thead className="bg-gray-50">
<tr>
<TableHeaderCell>順位</TableHeaderCell>
<TableHeaderCell>プレイヤー</TableHeaderCell>
<TableHeaderCell>スコア</TableHeaderCell>
<TableHeaderCell>提出時刻</TableHeaderCell>
<TableHeaderCell>コード</TableHeaderCell>
</tr>
</thead>
<tbody className="bg-white divide-y divide-gray-300">
{ranking.map((entry, index) => (
<tr key={entry.player.user_id}>
<TableBodyCell>{index + 1}</TableBodyCell>
<TableBodyCell>
{entry.player.display_name}
{entry.player.label && ` (${entry.player.label})`}
</TableBodyCell>
<TableBodyCell>{entry.score}</TableBodyCell>
<TableBodyCell>
{formatUnixTimestamp(entry.submitted_at)}
</TableBodyCell>
<TableBodyCell>
{entry.code && <CodePopover code={entry.code} />}
</TableBodyCell>
</tr>
))}
</tbody>
</table>
</div>
);
}
|
