blob: 60f4808e4c91c1ba61fbdc354bd0ec9ff06deb8d (
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
|
import { useAtomValue } from "jotai";
import { rankingAtom } from "../../states/watch";
import type { SupportedLanguage } from "../../types/SupportedLanguage";
import CodePopover from "./CodePopover";
import DataTable, { DataTableCell, formatUnixTimestamp } from "./DataTable";
type Props = {
problemLanguage: SupportedLanguage;
};
export default function RankingTable({ problemLanguage }: Props) {
const ranking = useAtomValue(rankingAtom);
const showCode = ranking.some((entry) => entry.code != null);
return (
<DataTable
headers={[
"順位",
"プレイヤー",
"スコア",
"提出時刻",
...(showCode ? ["コード"] : []),
]}
>
{ranking.map((entry, index) => (
<tr key={entry.player.user_id}>
<DataTableCell>{index + 1}</DataTableCell>
<DataTableCell>
{entry.player.display_name}
{entry.player.label && ` (${entry.player.label})`}
</DataTableCell>
<DataTableCell>{entry.score}</DataTableCell>
<DataTableCell>
{formatUnixTimestamp(entry.submitted_at)}
</DataTableCell>
{showCode && (
<DataTableCell>
{entry.code && (
<CodePopover code={entry.code} language={problemLanguage} />
)}
</DataTableCell>
)}
</tr>
))}
</DataTable>
);
}
|
