Added flag icons
This commit is contained in:
z0ccc
parent
4a056a5ca8
commit
90bdb247b1
6 changed files with 134 additions and 27 deletions
|
|
@ -4,10 +4,7 @@ module.exports = {
|
|||
es2021: true,
|
||||
webextensions: true,
|
||||
},
|
||||
extends: [
|
||||
'plugin:react/recommended',
|
||||
'airbnb',
|
||||
],
|
||||
extends: ['plugin:react/recommended', 'airbnb'],
|
||||
plugins: ['react'],
|
||||
settings: {
|
||||
'import/resolver': {
|
||||
|
|
@ -34,5 +31,6 @@ module.exports = {
|
|||
jsx: 'never',
|
||||
},
|
||||
],
|
||||
'react/jsx-one-expression-per-line': 'off',
|
||||
},
|
||||
};
|
||||
|
|
|
|||
87
package-lock.json
generated
87
package-lock.json
generated
|
|
@ -5,12 +5,15 @@
|
|||
"requires": true,
|
||||
"packages": {
|
||||
"": {
|
||||
"name": "vytal",
|
||||
"version": "1.0.0",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"react": "^16.14.0",
|
||||
"react-dom": "^16.14.0",
|
||||
"react-hot-loader": "^4.13.0"
|
||||
"react-flagpack": "^0.1.1",
|
||||
"react-hot-loader": "^4.13.0",
|
||||
"react-world-flags": "^1.4.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.12.3",
|
||||
|
|
@ -6457,6 +6460,11 @@
|
|||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/flagpack-core": {
|
||||
"version": "1.1.2",
|
||||
"resolved": "https://registry.npmjs.org/flagpack-core/-/flagpack-core-1.1.2.tgz",
|
||||
"integrity": "sha512-brm/LJf/xxiwRnjdThPsxaRZsbcN0fjPX4WMdKfuwJYOt3pdVw1pfP2dTBh743qqkw4CQzXTfEWjRDN0KvZ/qA=="
|
||||
},
|
||||
"node_modules/flat-cache": {
|
||||
"version": "3.0.4",
|
||||
"resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.0.4.tgz",
|
||||
|
|
@ -10454,6 +10462,17 @@
|
|||
"object-assign": "^4.1.1"
|
||||
}
|
||||
},
|
||||
"node_modules/react-flagpack": {
|
||||
"version": "0.1.1",
|
||||
"resolved": "https://registry.npmjs.org/react-flagpack/-/react-flagpack-0.1.1.tgz",
|
||||
"integrity": "sha512-cB2IGYkYUVPAPsteBjReHFGquvnkQk0MDzHSfvvCYjh1r4kIEwr//J65JNwF0DRF+W3PiQLcw/bqDRf/6bHgSg==",
|
||||
"dependencies": {
|
||||
"flagpack-core": "^1.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^16.8.*"
|
||||
}
|
||||
},
|
||||
"node_modules/react-hot-loader": {
|
||||
"version": "4.13.0",
|
||||
"resolved": "https://registry.npmjs.org/react-hot-loader/-/react-hot-loader-4.13.0.tgz",
|
||||
|
|
@ -10490,6 +10509,18 @@
|
|||
"resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
|
||||
"integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
|
||||
},
|
||||
"node_modules/react-world-flags": {
|
||||
"version": "1.4.0",
|
||||
"resolved": "https://registry.npmjs.org/react-world-flags/-/react-world-flags-1.4.0.tgz",
|
||||
"integrity": "sha512-SkOzl/v6LYBphJNSeeQXTogAiLZN1Yy2HFx2Qjda/82MCWFimj9cenmOXASbfbKeqFbo/17M8HauY6mfzWmTDw==",
|
||||
"dependencies": {
|
||||
"svg-country-flags": "^1.2.7",
|
||||
"world-countries": "^4.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">=0.14"
|
||||
}
|
||||
},
|
||||
"node_modules/read-chunk": {
|
||||
"version": "3.2.0",
|
||||
"resolved": "https://registry.npmjs.org/read-chunk/-/read-chunk-3.2.0.tgz",
|
||||
|
|
@ -12146,6 +12177,11 @@
|
|||
"node": ">=4"
|
||||
}
|
||||
},
|
||||
"node_modules/svg-country-flags": {
|
||||
"version": "1.2.10",
|
||||
"resolved": "https://registry.npmjs.org/svg-country-flags/-/svg-country-flags-1.2.10.tgz",
|
||||
"integrity": "sha512-xrqwo0TYf/h2cfPvGpjdSuSguUbri4vNNizBnwzoZnX0xGo3O5nGJMlbYEp7NOYcnPGBm6LE2axqDWSB847bLw=="
|
||||
},
|
||||
"node_modules/table": {
|
||||
"version": "6.7.1",
|
||||
"resolved": "https://registry.npmjs.org/table/-/table-6.7.1.tgz",
|
||||
|
|
@ -13565,6 +13601,11 @@
|
|||
"node": ">=8.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/world-countries": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/world-countries/-/world-countries-4.0.0.tgz",
|
||||
"integrity": "sha512-LsFFYmggquj0U+i7VUaJOZYz5F4QNu+oceGw8odnyVHMT2LxYSdVncqdouOEnq1esr7yCakp9+3BZTztuSw1Pg=="
|
||||
},
|
||||
"node_modules/wrap-ansi": {
|
||||
"version": "5.1.0",
|
||||
"resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-5.1.0.tgz",
|
||||
|
|
@ -13647,9 +13688,9 @@
|
|||
}
|
||||
},
|
||||
"node_modules/ws": {
|
||||
"version": "6.2.1",
|
||||
"resolved": "https://registry.npmjs.org/ws/-/ws-6.2.1.tgz",
|
||||
"integrity": "sha512-GIyAXC2cB7LjvpgMt9EKS2ldqr0MTrORaleiOno6TweZ6r3TKtoFQWay/2PceJ3RuBasOHzXNn5Lrw1X0bEjqA==",
|
||||
"version": "6.2.2",
|
||||
"resolved": "https://registry.npmjs.org/ws/-/ws-6.2.2.tgz",
|
||||
"integrity": "sha512-zmhltoSR8u1cnDsD43TX59mzoMZsLKqUweyYBAIvTngR3shc0W6aOZylZmq/7hqyVxPdi+5Ud2QInblgyE72fw==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"async-limiter": "~1.0.0"
|
||||
|
|
@ -19440,6 +19481,11 @@
|
|||
"readable-stream": "^2.0.2"
|
||||
}
|
||||
},
|
||||
"flagpack-core": {
|
||||
"version": "1.1.2",
|
||||
"resolved": "https://registry.npmjs.org/flagpack-core/-/flagpack-core-1.1.2.tgz",
|
||||
"integrity": "sha512-brm/LJf/xxiwRnjdThPsxaRZsbcN0fjPX4WMdKfuwJYOt3pdVw1pfP2dTBh743qqkw4CQzXTfEWjRDN0KvZ/qA=="
|
||||
},
|
||||
"flat-cache": {
|
||||
"version": "3.0.4",
|
||||
"resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.0.4.tgz",
|
||||
|
|
@ -22590,6 +22636,14 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"react-flagpack": {
|
||||
"version": "0.1.1",
|
||||
"resolved": "https://registry.npmjs.org/react-flagpack/-/react-flagpack-0.1.1.tgz",
|
||||
"integrity": "sha512-cB2IGYkYUVPAPsteBjReHFGquvnkQk0MDzHSfvvCYjh1r4kIEwr//J65JNwF0DRF+W3PiQLcw/bqDRf/6bHgSg==",
|
||||
"requires": {
|
||||
"flagpack-core": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"react-hot-loader": {
|
||||
"version": "4.13.0",
|
||||
"resolved": "https://registry.npmjs.org/react-hot-loader/-/react-hot-loader-4.13.0.tgz",
|
||||
|
|
@ -22622,6 +22676,15 @@
|
|||
"resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
|
||||
"integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
|
||||
},
|
||||
"react-world-flags": {
|
||||
"version": "1.4.0",
|
||||
"resolved": "https://registry.npmjs.org/react-world-flags/-/react-world-flags-1.4.0.tgz",
|
||||
"integrity": "sha512-SkOzl/v6LYBphJNSeeQXTogAiLZN1Yy2HFx2Qjda/82MCWFimj9cenmOXASbfbKeqFbo/17M8HauY6mfzWmTDw==",
|
||||
"requires": {
|
||||
"svg-country-flags": "^1.2.7",
|
||||
"world-countries": "^4.0.0"
|
||||
}
|
||||
},
|
||||
"read-chunk": {
|
||||
"version": "3.2.0",
|
||||
"resolved": "https://registry.npmjs.org/read-chunk/-/read-chunk-3.2.0.tgz",
|
||||
|
|
@ -24004,6 +24067,11 @@
|
|||
"has-flag": "^3.0.0"
|
||||
}
|
||||
},
|
||||
"svg-country-flags": {
|
||||
"version": "1.2.10",
|
||||
"resolved": "https://registry.npmjs.org/svg-country-flags/-/svg-country-flags-1.2.10.tgz",
|
||||
"integrity": "sha512-xrqwo0TYf/h2cfPvGpjdSuSguUbri4vNNizBnwzoZnX0xGo3O5nGJMlbYEp7NOYcnPGBm6LE2axqDWSB847bLw=="
|
||||
},
|
||||
"table": {
|
||||
"version": "6.7.1",
|
||||
"resolved": "https://registry.npmjs.org/table/-/table-6.7.1.tgz",
|
||||
|
|
@ -25127,6 +25195,11 @@
|
|||
"typical": "^5.0.0"
|
||||
}
|
||||
},
|
||||
"world-countries": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/world-countries/-/world-countries-4.0.0.tgz",
|
||||
"integrity": "sha512-LsFFYmggquj0U+i7VUaJOZYz5F4QNu+oceGw8odnyVHMT2LxYSdVncqdouOEnq1esr7yCakp9+3BZTztuSw1Pg=="
|
||||
},
|
||||
"wrap-ansi": {
|
||||
"version": "5.1.0",
|
||||
"resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-5.1.0.tgz",
|
||||
|
|
@ -25196,9 +25269,9 @@
|
|||
}
|
||||
},
|
||||
"ws": {
|
||||
"version": "6.2.1",
|
||||
"resolved": "https://registry.npmjs.org/ws/-/ws-6.2.1.tgz",
|
||||
"integrity": "sha512-GIyAXC2cB7LjvpgMt9EKS2ldqr0MTrORaleiOno6TweZ6r3TKtoFQWay/2PceJ3RuBasOHzXNn5Lrw1X0bEjqA==",
|
||||
"version": "6.2.2",
|
||||
"resolved": "https://registry.npmjs.org/ws/-/ws-6.2.2.tgz",
|
||||
"integrity": "sha512-zmhltoSR8u1cnDsD43TX59mzoMZsLKqUweyYBAIvTngR3shc0W6aOZylZmq/7hqyVxPdi+5Ud2QInblgyE72fw==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"async-limiter": "~1.0.0"
|
||||
|
|
|
|||
|
|
@ -40,6 +40,8 @@
|
|||
"dependencies": {
|
||||
"react": "^16.14.0",
|
||||
"react-dom": "^16.14.0",
|
||||
"react-hot-loader": "^4.13.0"
|
||||
"react-flagpack": "^0.1.1",
|
||||
"react-hot-loader": "^4.13.0",
|
||||
"react-world-flags": "^1.4.0"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,6 +2,11 @@
|
|||
font-weight: 600;
|
||||
}
|
||||
|
||||
input {
|
||||
margin: 0 8px 0 0;
|
||||
.itemWrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.flagWrap {
|
||||
margin: 0 0 0 6px;
|
||||
}
|
||||
53
src/App.jsx
53
src/App.jsx
|
|
@ -1,5 +1,6 @@
|
|||
import * as React from 'react';
|
||||
import { useEffect } from 'react';
|
||||
import { useState, useEffect } from 'react';
|
||||
import Flag from 'react-flagpack';
|
||||
import './App.css';
|
||||
|
||||
const updateDOM = (id, text) => {
|
||||
|
|
@ -7,10 +8,13 @@ const updateDOM = (id, text) => {
|
|||
};
|
||||
|
||||
const App = () => {
|
||||
const [country, setCountry] = useState('US');
|
||||
|
||||
useEffect(() => {
|
||||
fetch('http://ip-api.com/json')
|
||||
.then((response) => response.json())
|
||||
.then((data) => {
|
||||
setCountry(data.countryCode);
|
||||
updateDOM('ipAddress', data.query);
|
||||
updateDOM('country', data.country);
|
||||
updateDOM('region', data.regionName);
|
||||
|
|
@ -22,7 +26,7 @@ const App = () => {
|
|||
|
||||
navigator.getBattery().then((battery) => {
|
||||
updateDOM('batteryLevel', `${Math.round(battery.level * 100)}%`);
|
||||
updateDOM('batteryStatus', `${(battery.charging) ? '' : 'not '} charging`);
|
||||
updateDOM('batteryStatus', `${battery.charging ? '' : 'not '} charging`);
|
||||
});
|
||||
|
||||
updateDOM('memory', `${navigator.deviceMemory}GB`);
|
||||
|
|
@ -32,17 +36,42 @@ const App = () => {
|
|||
return (
|
||||
<div className="App">
|
||||
<div className="title">Connection</div>
|
||||
<div className="item" id="ipAddress">IP address: </div>
|
||||
<div className="item" id="country">Country: </div>
|
||||
<div className="item" id="region">Region: </div>
|
||||
<div className="item" id="city">City: </div>
|
||||
<div className="item" id="provider">Provider: </div>
|
||||
<div className="item" id="ipAddress">
|
||||
IP address:{' '}
|
||||
</div>
|
||||
<div className="itemWrap">
|
||||
<div className="item" id="country">
|
||||
Country:{' '}
|
||||
</div>
|
||||
<div className="flagWrap">
|
||||
<Flag code={country} size="S" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="item" id="region">
|
||||
Region:{' '}
|
||||
</div>
|
||||
<div className="item" id="city">
|
||||
City:{' '}
|
||||
</div>
|
||||
<div className="item" id="provider">
|
||||
Provider:{' '}
|
||||
</div>
|
||||
<div className="title">Hardware</div>
|
||||
<div className="item" id="screenSize">Screen resolution: </div>
|
||||
<div className="item" id="batteryLevel">Battery level: </div>
|
||||
<div className="item" id="batteryStatus">Battery status: </div>
|
||||
<div className="item" id="memory">Device memory: </div>
|
||||
<div className="item" id="cores"># of CPU cores: </div>
|
||||
<div className="item" id="screenSize">
|
||||
Screen resolution:{' '}
|
||||
</div>
|
||||
<div className="item" id="batteryLevel">
|
||||
Battery level:{' '}
|
||||
</div>
|
||||
<div className="item" id="batteryStatus">
|
||||
Battery status:{' '}
|
||||
</div>
|
||||
<div className="item" id="memory">
|
||||
Device memory:{' '}
|
||||
</div>
|
||||
<div className="item" id="cores">
|
||||
# of CPU cores:{' '}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
body {
|
||||
color: var(--text);
|
||||
background-color: var(--background);
|
||||
font-size: 12px;
|
||||
font-size: 14px;
|
||||
line-height: 22px;
|
||||
width: 300px;
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue