blob: 4ba3987260b63b8954a4e952fa7ed28b871a151e (
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
|
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);
return (
<DataTable headers={["順位", "プレイヤー", "スコア", "提出時刻", "コード"]}>
{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>
<DataTableCell>
{entry.code && (
<CodePopover code={entry.code} language={problemLanguage} />
)}
</DataTableCell>
</tr>
))}
</DataTable>
);
}
|
