1
0
portfolio/src/Pages/Radio/fielddays/fielddaysTable.js

64 lines
2.3 KiB
JavaScript

import React from 'react';
import { Link } from 'react-router-dom';
import fielddaysData from './fielddays.json';
import { useTheme } from '../../../ThemeContext';
import { getLanguage } from '../../../Language/Language';
import { getString } from '../../../Language/LanguageStrings';
const FielddaysTable = () => {
const { theme } = useTheme();
function generatePath(dateString, language, linkText) {
// Assuming dateString is in the format "YYYY-MM-DD"
const parts = dateString.split('-');
const year = parts[0];
const month = parts[1];
const day = parts[2];
// Construct the path
const path = `/${language}/radio/fielddays/${year}${month}${day}`;
// Return JSX with the path inside an <a> tag
return (
<Link reloadDocument to={path}>
{linkText}
</Link>
);
}
return (
<table className={'table table-striped table-hover table-' + theme}>
<thead>
<tr>
<th>{getString('date')}</th>
<th>{getString('name')}</th>
<th>POTA Locator</th>
<th>WW-FF Locator</th>
<th>{getString('bands')}</th>
<th>Mode</th>
<th>Transceiver</th>
<th>{getString('totalUniqueQSO')}</th>
<th>{getString('antenna')}</th>
</tr>
</thead>
<tbody>
{fielddaysData.fielddays.map((fieldDay, index) => (
<tr key={index}>
<td>{generatePath(fieldDay.date, getLanguage(), fieldDay.date)}</td>
<td>{generatePath(fieldDay.date, getLanguage(), fieldDay.name)}</td>
<td>{fieldDay['identifier-pota']}</td>
<td>{fieldDay['identifier-wwff']}</td>
<td>{fieldDay.bands}</td>
<td>{fieldDay.modes}</td>
<td>{fieldDay.transceiver}</td>
<td>{fieldDay['total-unique-qso']}</td>
<td>{fieldDay.antenna}</td>
</tr>
))}
</tbody>
</table>
)
}
export default FielddaysTable;