diff --git a/frontend/src/components/NavigatorBlock.js b/frontend/src/components/NavigatorBlock.js
new file mode 100644
index 0000000..f4e3851
--- /dev/null
+++ b/frontend/src/components/NavigatorBlock.js
@@ -0,0 +1,30 @@
+/* eslint-disable no-unused-vars */
+/* eslint-disable arrow-body-style */
+import { useState, useEffect } from 'react';
+import ScanBlock from './ScanBlock';
+import NewTable from './NewTable';
+import { getHardware, getWebGL, getBattery } from './main';
+import { getNavigator } from './navigator';
+
+const NavigatorBlock = () => {
+ // const [data, setData] = useState([]);
+
+ // useEffect(() => {
+ // getBattery().then((batteryInfo) => {
+ // setData([...getHardware(), ...getWebGL(), ...batteryInfo]);
+ // });
+ // }, []);
+
+ return (
+
+ Hardware
+
+
+ Explanation: JavaScript can be used to find information about
+ your hardware. This information can be used to create a fingerprint.
+
+
+ );
+};
+
+export default NavigatorBlock;
diff --git a/frontend/src/components/NewTable.js b/frontend/src/components/NewTable.js
new file mode 100644
index 0000000..b98fe4e
--- /dev/null
+++ b/frontend/src/components/NewTable.js
@@ -0,0 +1,17 @@
+const Table = ({ data }) => (
+
+
+ {data.map((item) => (
+
+
+ | {item.title} |
+ {item.value} |
+ {item.test} |
+
+
+ ))}
+
+
+);
+
+export default Table;
diff --git a/frontend/src/components/ScanBlocks.js b/frontend/src/components/ScanBlocks.js
index b9ae1e3..3fc17e2 100644
--- a/frontend/src/components/ScanBlocks.js
+++ b/frontend/src/components/ScanBlocks.js
@@ -1,3 +1,4 @@
+import NavigatorBlock from './NavigatorBlock';
import FingerprintBlock from './FingerprintBlock';
import LocationBlock from './LocationBlock';
import HardwareBlock from './HardwareBlock';
@@ -8,6 +9,7 @@ import FiltersBlock from './FiltersBlock';
const ScanBlocks = () => (
<>
+
diff --git a/frontend/src/components/navigator.js b/frontend/src/components/navigator.js
new file mode 100644
index 0000000..590fe5b
--- /dev/null
+++ b/frontend/src/components/navigator.js
@@ -0,0 +1,23 @@
+/* eslint-disable import/prefer-default-export */
+export { getNavigator };
+
+const getNavigator = () => {
+ const data = [
+ {
+ key: 'deviceMemory',
+ title: 'Device memory',
+ value: navigator.deviceMemory ? `${navigator.deviceMemory}GB` : 'N/A',
+ test:
+ checkUndefinedProperties('deviceMemory') &&
+ 'failed undefined properties',
+ },
+ ];
+ return data;
+};
+
+const checkUndefinedProperties = (property) => {
+ if (Object.getOwnPropertyDescriptor(navigator, property) !== undefined) {
+ return true;
+ }
+ return false;
+};