30 lines
1.1 KiB
JavaScript
30 lines
1.1 KiB
JavaScript
import { useContext } from 'react';
|
|
import DataContext from './Context';
|
|
import Block from './Block';
|
|
import TableRow from './TableRow';
|
|
|
|
const DataBlock = ({ title, type }) => {
|
|
const { initialData, delayedData, frameData, workerData } = useContext(DataContext);
|
|
|
|
return (
|
|
<Block>
|
|
<h1>{title}</h1>
|
|
<div className="tableWrap">
|
|
<table>
|
|
<tbody>
|
|
<TableRow title="Initial" value={initialData[type].value} issues={initialData[type].issues} />
|
|
<TableRow title="Delayed" value={delayedData[type].value} issues={delayedData[type].issues} />
|
|
<TableRow title="Frame" value={frameData[type].value} issues={frameData[type].issues} />
|
|
<TableRow title="Web worker" value={window.Worker.length ? workerData[type].value : null} issues={window.Worker.length ? workerData[type].issues : ['Web workers blocked']} />
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<p>
|
|
Date and language data can be used to identify your
|
|
location. Changing the settings on your computer can prevent this.
|
|
</p>
|
|
</Block>
|
|
);
|
|
};
|
|
|
|
export default DataBlock;
|