34 lines
1.1 KiB
JavaScript
34 lines
1.1 KiB
JavaScript
import { assetPath } from "../utils.js";
|
|
|
|
export function DamageTable({ rows, t }) {
|
|
if (!rows.length) return null;
|
|
|
|
const columns = Object.keys(rows[0]);
|
|
|
|
return (
|
|
<div className="damage-table-wrap legacy-scrollbar">
|
|
<table className="damage-table">
|
|
<thead>
|
|
<tr>
|
|
{columns.map((column) => (
|
|
<th key={column}>
|
|
{column === "name" ? "" : <img src={assetPath(column)} alt={t(column, { capitalize: true })} title={t(column, { capitalize: true })} />}
|
|
</th>
|
|
))}
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{rows.map((row, rowIndex) => (
|
|
<tr key={`${row.name}-${rowIndex}`}>
|
|
{columns.map((column) => column === "name" ? (
|
|
<td key={column} title={t(row[column], { capitalize: true })}>{t(row[column], { capitalize: true })}</td>
|
|
) : (
|
|
<td key={column}><img src={assetPath(`${row[column]}-stars`)} alt={`${row[column]} étoiles`} /></td>
|
|
))}
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
);
|
|
}
|