45 lines
1.4 KiB
JavaScript
45 lines
1.4 KiB
JavaScript
import React from "react";
|
|
import {useTheme} from "../../hooks/themeHook";
|
|
import {useTranslation} from "react-i18next";
|
|
import Scrollable from "../Scrollable";
|
|
|
|
const PingRow = ({country}) => {
|
|
return (
|
|
<tr>
|
|
<td>{country.country}</td>
|
|
<td>{country.avg_ping}</td>
|
|
<td>{country.min_ping}</td>
|
|
<td>{country.max_ping}</td>
|
|
</tr>
|
|
);
|
|
}
|
|
|
|
const PingTable = ({countries}) => {
|
|
const {t} = useTranslation();
|
|
const {nightModeEnabled} = useTheme();
|
|
|
|
return (
|
|
<Scrollable>
|
|
<table className={"table mb-0" + (nightModeEnabled ? " table-dark" : '')}>
|
|
<thead className="bg-amber" style={{position: "sticky", top: 0}}>
|
|
<tr>
|
|
<th>{t('html.label.country')}</th>
|
|
<th>{t('html.label.averagePing')}</th>
|
|
<th>{t('html.label.bestPing')}</th>
|
|
<th>{t('html.label.worstPing')}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{countries.length ? countries.map(country => <PingRow key={country?.country} country={country}/>) : <tr>
|
|
<td>{t('generic.noData')}</td>
|
|
<td>-</td>
|
|
<td>-</td>
|
|
<td>-</td>
|
|
</tr>}
|
|
</tbody>
|
|
</table>
|
|
</Scrollable>
|
|
)
|
|
};
|
|
|
|
export default PingTable; |