├── src
    ├── App.scss
    ├── components
    │   ├── info
    │   │   ├── Info.js
    │   │   └── info.scss
    │   ├── themeswitch
    │   │   ├── themeswitch.scss
    │   │   └── ThemeSwitch.js
    │   ├── header
    │   │   ├── Header.js
    │   │   └── header.scss
    │   ├── input
    │   │   ├── InputBox.js
    │   │   └── input.scss
    │   └── content
    │   │   ├── contentbox.scss
    │   │   └── ContentBox.js
    ├── assets
    │   ├── map.png
    │   └── ipwire-logo.svg
    ├── setupTests.js
    ├── App.test.js
    ├── index.js
    ├── reportWebVitals.js
    ├── App.js
    ├── logo.svg
    └── index.scss
├── README.md
├── .env
├── public
    ├── favicon.ico
    ├── robots.txt
    ├── manifest.json
    └── index.html
├── .gitignore
├── package.json
└── .eslintcache


/src/App.scss:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | 
2 | 


--------------------------------------------------------------------------------
/.env:
--------------------------------------------------------------------------------
1 | FAST_REFRESH=false


--------------------------------------------------------------------------------
/src/components/info/Info.js:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/src/components/info/info.scss:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DavidHDev/ipwire/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/src/assets/map.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/DavidHDev/ipwire/HEAD/src/assets/map.png


--------------------------------------------------------------------------------
/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 | 


--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 |   "short_name": "IP TrackTool",
3 |   "name": "IP TrackTool",
4 |   "start_url": ".",
5 |   "display": "standalone",
6 |   "theme_color": "#000000",
7 |   "background_color": "#ffffff"
8 | }
9 | 


--------------------------------------------------------------------------------
/src/setupTests.js:
--------------------------------------------------------------------------------
1 | // jest-dom adds custom jest matchers for asserting on DOM nodes.
2 | // allows you to do things like:
3 | // expect(element).toHaveTextContent(/react/i)
4 | // learn more: https://github.com/testing-library/jest-dom
5 | import '@testing-library/jest-dom';
6 | 


--------------------------------------------------------------------------------
/src/App.test.js:
--------------------------------------------------------------------------------
1 | import { render, screen } from '@testing-library/react';
2 | import App from './App';
3 | 
4 | test('renders learn react link', () => {
5 |   render(<App />);
6 |   const linkElement = screen.getByText(/learn react/i);
7 |   expect(linkElement).toBeInTheDocument();
8 | });
9 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom';
 3 | import './index.scss';
 4 | import App from './App';
 5 | import { ChakraProvider } from "@chakra-ui/react";
 6 | 
 7 | ReactDOM.render(
 8 |   <ChakraProvider resetCSS={true}>
 9 |     <App />
10 |   </ChakraProvider>,
11 |   document.getElementById('root')
12 | );
13 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # production
12 | 
13 | # misc
14 | .DS_Store
15 | .env.local
16 | .env.development.local
17 | .env.test.local
18 | .env.production.local
19 | 
20 | npm-debug.log*
21 | yarn-debug.log*
22 | yarn-error.log*
23 | 


--------------------------------------------------------------------------------
/src/reportWebVitals.js:
--------------------------------------------------------------------------------
 1 | const reportWebVitals = onPerfEntry => {
 2 |   if (onPerfEntry && onPerfEntry instanceof Function) {
 3 |     import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
 4 |       getCLS(onPerfEntry);
 5 |       getFID(onPerfEntry);
 6 |       getFCP(onPerfEntry);
 7 |       getLCP(onPerfEntry);
 8 |       getTTFB(onPerfEntry);
 9 |     });
10 |   }
11 | };
12 | 
13 | export default reportWebVitals;
14 | 


--------------------------------------------------------------------------------
/src/components/themeswitch/themeswitch.scss:
--------------------------------------------------------------------------------
 1 | .app-theme-switcher {
 2 |     display: flex;
 3 |     align-items: center;
 4 |     justify-content: space-between;
 5 |     z-index: 10;
 6 | 
 7 |     .theme-switch-text {
 8 |         opacity: 0.8;
 9 |         color: #fff;
10 |         font-weight: 500;
11 |         margin: 0;
12 |         position: relative;
13 |         top: -1px;
14 |     }
15 | 
16 |     .theme-icon {
17 |         margin-right: 10px;
18 |     }
19 | 
20 |     .app-switch {
21 |         margin-left: .5em;
22 |     }
23 | }
24 | 
25 | @media only screen and (max-width: 500px) {
26 |     .app-theme-switcher {
27 |         font-size: 12px;
28 |     }
29 |   }


--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
 1 | import './App.scss';
 2 | import React, { useState } from 'react';
 3 | import { Header } from './components/header/Header';
 4 | import { InputBox } from './components/input/InputBox';
 5 | import { ContentBox } from './components/content/ContentBox';
 6 | 
 7 | function App() {
 8 | 
 9 |   const [content, setContent] = useState([])
10 |   const [country, setCountry] = useState([])
11 | 
12 |   return (
13 |     <div className="app">
14 |       <Header></Header>
15 |       <InputBox setContent={setContent} setCountry={setCountry}></InputBox>
16 |       <ContentBox content={content} country={country}></ContentBox>
17 |     </div>
18 |   );
19 | }
20 | 
21 | export default App;
22 | 


--------------------------------------------------------------------------------
/src/components/themeswitch/ThemeSwitch.js:
--------------------------------------------------------------------------------
 1 | import './themeswitch.scss';
 2 | import React from 'react'
 3 | import { Switch } from "@chakra-ui/react"
 4 | import useDarkMode from 'use-dark-mode';
 5 | 
 6 | export const ThemeSwitch = () => {
 7 | 
 8 |     const darkMode = useDarkMode(false);
 9 | 
10 |     return (
11 |         <div className="app-theme-switcher">
12 |             {
13 |                 darkMode.value === true 
14 |                 ? <i className="eva eva-moon-outline theme-icon"></i>
15 |                 : <i className="eva eva-sun-outline theme-icon"></i>
16 |             }
17 |             <Switch isChecked={darkMode.value} onChange={darkMode.toggle} className="app-switch" colorScheme="cyan" size="lg" />
18 |         </div>
19 |     )
20 | }
21 | 


--------------------------------------------------------------------------------
/src/components/header/Header.js:
--------------------------------------------------------------------------------
 1 | import React, { useEffect, useState } from 'react';
 2 | import { ThemeSwitch } from '../themeswitch/ThemeSwitch';
 3 | import logo from '../../assets/ipwire-logo.svg';
 4 | import './header.scss';
 5 | 
 6 | export const Header = () => {
 7 | 
 8 |     const [scroll, setScroll] = useState(true)
 9 | 
10 |     useEffect(() => {
11 |         document.addEventListener("scroll", () => {
12 |             const scrollCheck = window.scrollY < 50
13 |             if (scrollCheck !== scroll) {
14 |                 setScroll(scrollCheck)
15 |             }
16 |         })
17 |     })
18 | 
19 |     return (
20 |         <div className={scroll ? 'app-header' : 'app-header app-header-small'}>
21 |             <nav className='app-navigation'>
22 |                 <ThemeSwitch></ThemeSwitch>
23 |                 <div onClick={() => window.scrollTo(0, 0)} className={'app-logo'}>
24 |                     <img src={logo} alt="ipwire logo" />
25 |                 </div>
26 |             </nav>
27 |             <h1 className="header-title">{scroll ? 'Track any IP and discover useful information.' : ''}</h1>
28 |         </div>
29 |     )
30 | }
31 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"
 6 |    integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A=="
 7 |    crossorigin=""/>
 8 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 9 |     <meta name="theme-color" content="#000000" />
10 |     <meta
11 |       name="description"
12 |       content="Track any IP Address and find essential information, geolocation, street view and more."
13 |     />
14 |     <link rel="icon" type="image/png" href="./favicon.ico"/>
15 |     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
16 |     <title>ipwire - IP Tracker</title>
17 |   </head>
18 |   <body>
19 |     <noscript>You need to enable JavaScript to run this app.</noscript>
20 |     <div id="root"></div>
21 | 
22 | 
23 |     <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"
24 |    integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA=="
25 |    crossorigin=""></script>
26 |   </body>
27 | </html>
28 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "iptracker",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "@chakra-ui/react": "^1.0.0",
 7 |     "@emotion/react": "^11.1.4",
 8 |     "@emotion/styled": "^11.0.0",
 9 |     "@testing-library/jest-dom": "^5.11.8",
10 |     "@testing-library/react": "^11.2.3",
11 |     "@testing-library/user-event": "^12.6.0",
12 |     "axios": "^0.21.4",
13 |     "eva-icons": "^1.1.3",
14 |     "framer-motion": "^3.2.0",
15 |     "leaflet": "^1.7.1",
16 |     "pdfmake": "^0.2.4",
17 |     "public-ip": "^4.0.3",
18 |     "react": "^17.0.1",
19 |     "react-dom": "^17.0.1",
20 |     "react-hot-loader": "^4.13.0",
21 |     "react-image-fallback": "^8.0.0",
22 |     "react-leaflet": "^3.0.5",
23 |     "react-pdfmake": "^0.3.0",
24 |     "react-scripts": "4.0.1",
25 |     "sass": "^1.45.1",
26 |     "use-dark-mode": "^2.3.1",
27 |     "web-vitals": "^0.2.4"
28 |   },
29 |   "scripts": {
30 |     "start": "react-scripts start",
31 |     "build": "react-scripts build && echo ‘/* /index.html 200’ | cat >build/_redirects",
32 |     "test": "react-scripts test",
33 |     "eject": "react-scripts eject"
34 |   },
35 |   "eslintConfig": {
36 |     "extends": [
37 |       "react-app",
38 |       "react-app/jest"
39 |     ]
40 |   },
41 |   "browserslist": {
42 |     "production": [
43 |       ">0.2%",
44 |       "not dead",
45 |       "not op_mini all"
46 |     ],
47 |     "development": [
48 |       "last 1 chrome version",
49 |       "last 1 firefox version",
50 |       "last 1 safari version"
51 |     ]
52 |   }
53 | }
54 | 


--------------------------------------------------------------------------------
/src/components/header/header.scss:
--------------------------------------------------------------------------------
 1 | .app-header-small {
 2 |     height: 110px !important;
 3 |     transition: .3s ease !important;
 4 | }
 5 | 
 6 | .app-header {
 7 |     position: fixed;
 8 |     height: 280px;
 9 |     top: 0;
10 |     width: 100vw;
11 |     box-shadow: 0 0 50px rgba(17, 17, 17, 0.35);
12 |     background-color: #fff;
13 |     z-index: 3;
14 |     transition: .3s ease !important;
15 | 
16 |     .header-title {
17 |         font-family: 'Sora', sans-serif;
18 |         position: absolute;
19 |         z-index: 4;
20 |         font-weight: 500;
21 |         width: 20ch;
22 |         letter-spacing: -1px;
23 |         left: 50%;
24 |         line-height: 120%;
25 |         top: 50%;
26 |         transform: translate(-50%, -50%);
27 |         font-size: 35px;
28 |         color: #f5f5f5;
29 |         text-align: center;
30 |     }
31 | 
32 |     .app-navigation {
33 |         width: 80%;
34 |         margin: 0 auto;
35 |         height: 100px;
36 |         display: flex;
37 |         flex-direction: row-reverse;
38 |         align-items: center;
39 |         justify-content: space-between;
40 |         position: fixed;
41 |         left: 50%;
42 |         transform: translateX(-50%);
43 |         z-index: 999;
44 | 
45 |         .app-logo {
46 |             cursor: pointer;
47 |         }
48 |     }
49 | }
50 | 
51 | @media only screen and (max-width: 1200px) {
52 |     .header-title {
53 |         width: 80%;
54 |         font-size: 30px !important;
55 |     }
56 |   }
57 | 
58 | 
59 | @media only screen and (max-width: 500px) {
60 |     .header-title {
61 |         font-size: 22px !important;
62 |     }
63 | 
64 |     .app-navigation {
65 |         width: 95% !important;
66 |     }
67 | 
68 |     .app-logo {
69 |         font-size: 12px;
70 |         z-index: 99;
71 |         left: 1em !important;
72 |         top: 1em !important;
73 |     }
74 |   }


--------------------------------------------------------------------------------
/.eslintcache:
--------------------------------------------------------------------------------
1 | [{"/Users/david/Documents/Code/ipwire/src/index.js":"1","/Users/david/Documents/Code/ipwire/src/App.js":"2","/Users/david/Documents/Code/ipwire/src/components/input/InputBox.js":"3","/Users/david/Documents/Code/ipwire/src/components/header/Header.js":"4","/Users/david/Documents/Code/ipwire/src/components/content/ContentBox.js":"5","/Users/david/Documents/Code/ipwire/src/components/themeswitch/ThemeSwitch.js":"6"},{"size":283,"mtime":1640679182578,"results":"7","hashOfConfig":"8"},{"size":587,"mtime":1640679182576,"results":"9","hashOfConfig":"8"},{"size":2199,"mtime":1640688435459,"results":"10","hashOfConfig":"8"},{"size":1000,"mtime":1640685520778,"results":"11","hashOfConfig":"8"},{"size":6796,"mtime":1640695378971,"results":"12","hashOfConfig":"8"},{"size":635,"mtime":1640684113749,"results":"13","hashOfConfig":"8"},{"filePath":"14","messages":"15","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"16"},"1v03f2b",{"filePath":"17","messages":"18","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"16"},{"filePath":"19","messages":"20","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"16"},{"filePath":"21","messages":"22","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"16"},{"filePath":"23","messages":"24","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"25","messages":"26","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"16"},"/Users/david/Documents/Code/ipwire/src/index.js",[],["27","28"],"/Users/david/Documents/Code/ipwire/src/App.js",[],"/Users/david/Documents/Code/ipwire/src/components/input/InputBox.js",[],"/Users/david/Documents/Code/ipwire/src/components/header/Header.js",[],"/Users/david/Documents/Code/ipwire/src/components/content/ContentBox.js",[],"/Users/david/Documents/Code/ipwire/src/components/themeswitch/ThemeSwitch.js",[],{"ruleId":"29","replacedBy":"30"},{"ruleId":"31","replacedBy":"32"},"no-native-reassign",["33"],"no-negated-in-lhs",["34"],"no-global-assign","no-unsafe-negation"]


--------------------------------------------------------------------------------
/src/components/input/InputBox.js:
--------------------------------------------------------------------------------
 1 | import React, { useState, useEffect } from 'react';
 2 | import publicIp from 'public-ip';
 3 | import axios from 'axios';
 4 | import './input.scss';
 5 | import { Button, Input } from "@chakra-ui/react";
 6 | 
 7 | export const InputBox = ({ setContent, setCountry }) => {
 8 | 
 9 |     const [input, setInput] = useState('')
10 | 
11 |     const [loader, setLoader] = useState(false);
12 | 
13 |     const [scroll, setScroll] = useState(true)
14 | 
15 |     const getContent = (ip) => {
16 |         setLoader(true);
17 |         axios.get(`https://ipapi.co/${ip}/json/`)
18 |             .then(res => {
19 |                 getCountry(res.data.country_name)
20 |                 setContent(res.data)
21 |             })
22 |             .finally(() => {
23 |                 setLoader(false);
24 |             })
25 |     }
26 | 
27 |     const getCountry = (countryName) => {
28 |         axios.get(`https://restcountries.com/v3.1/name/${countryName}?fullText=true`)
29 |             .then(res => {
30 |                 setCountry(res.data[0]);
31 |             })
32 |     }
33 | 
34 |     const getPublicIp = () => {
35 |         return publicIp.v4();
36 |     }
37 | 
38 |     const fetchData = () => {
39 |         getPublicIp()
40 |             .then(res => {
41 |                 setInput(res);
42 |                 getContent(res);
43 |             })
44 |     }
45 | 
46 |     useEffect(() => {
47 |         fetchData();
48 |     // eslint-disable-next-line react-hooks/exhaustive-deps
49 |     }, [])
50 | 
51 |     useEffect(() => {
52 |         document.addEventListener("scroll", () => {
53 |             const scrollCheck = window.scrollY < 50
54 |             if (scrollCheck !== scroll) {
55 |                 setScroll(scrollCheck)
56 |             }
57 |         })
58 |     })
59 | 
60 |     return (
61 |         <div className={scroll ? 'app-inputbox' : 'app-inputbox input-box-small'}>
62 |             <Input
63 |                 value={input}
64 |                 onChange={e => setInput(e.target.value)}
65 |                 className={"main-input"}
66 |                 placeholder='IP Address'>
67 |             </Input>
68 |             <Input disabled className={"main-input dummy-input"}></Input>
69 |             <Button
70 |                 onClick={() => getContent(input)}
71 |                 isLoading={loader}
72 |                 loadingText="Searching"
73 |                 className={"main-button"}
74 |                 variant='outline'
75 |             >
76 |                 Track
77 |             </Button>
78 |         </div>
79 |     )
80 | }
81 | 


--------------------------------------------------------------------------------
/src/logo.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>


--------------------------------------------------------------------------------
/src/index.scss:
--------------------------------------------------------------------------------
  1 | @import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700&display=swap');
  2 | @import url('/node_modules/eva-icons/style/eva-icons.css');
  3 | 
  4 | /* width */
  5 | ::-webkit-scrollbar {
  6 |   width: 10px;
  7 | }
  8 | 
  9 | /* Track */
 10 | ::-webkit-scrollbar-track {
 11 |   background: #fff;
 12 | }
 13 | 
 14 | /* Handle */
 15 | ::-webkit-scrollbar-thumb {
 16 |   background:  #cfcfcf;
 17 | }
 18 | 
 19 | html {
 20 |   scroll-behavior: smooth;
 21 | }
 22 | 
 23 | body {
 24 |   overflow-x: hidden;
 25 |   color: #333 !important;
 26 |   margin: 0;
 27 |   font-family: 'Sora', sans-serif;
 28 |   -webkit-font-smoothing: antialiased;
 29 |   -moz-osx-font-smoothing: grayscale;
 30 | }
 31 | 
 32 | .leaflet-container {
 33 |   min-height: 600px;
 34 |   position: relative;
 35 |   top: -80px;
 36 |   z-index: 2;
 37 |   opacity: 1;
 38 | }
 39 | 
 40 | .chakra-switch__track {
 41 |   background: #4B3CFF !important;
 42 |   background-color: #4B3CFF !important;
 43 | }
 44 | 
 45 | body.dark-mode .leaflet-container {
 46 |   opacity: 0.85;
 47 | }
 48 | 
 49 | body.dark-mode .section-title {
 50 |   color: #f5f5f5;
 51 | }
 52 | 
 53 | body.dark-mode .app-header {
 54 |   background-color: #2F2D41;
 55 | }
 56 | 
 57 | body.light-mode {
 58 |   background-color: #fff;
 59 |   color: #333;
 60 |   transition: background-color 0.3s ease;
 61 | }
 62 | 
 63 | body.light-mode .header-title {
 64 |   color: #333;
 65 | }
 66 | 
 67 | body.light-mode .app-logo {
 68 |   filter: invert(95%);
 69 | }
 70 | 
 71 | body.dark-mode {
 72 |   background-color: #2F2D41;
 73 |   color: #f5f5f5;
 74 | }
 75 | 
 76 | body.dark-mode .main-input {
 77 |   background-color: #201E2D;
 78 |   color: #f5f5f5;
 79 | }
 80 | 
 81 | span.chakra-switch__track {
 82 |   &:focus {
 83 |     box-shadow: 0 0 0 3px rgba(66, 201, 225, 0.6) !important;
 84 |   }
 85 | }
 86 | 
 87 | body.dark-mode .chakra-stat__label {
 88 |   font-family: 'Sora', sans-serif;
 89 |   color: #f5f5f5;
 90 | }
 91 | 
 92 | body.dark-mode .general-content {
 93 |   background-color: #201E2D;
 94 | }
 95 | 
 96 | body.dark-mode .list-item-descrip {
 97 |   color: #f5f5f5;
 98 |   
 99 | }
100 | 
101 | body.dark-mode .content-flag {
102 |   background-color: #2F2D41;
103 | }
104 | 
105 | body.dark-mode .theme-icon {
106 |   color: #fff;
107 | }
108 | 
109 | @media only screen and (max-width: 1200px) {
110 |   .chakra-stat {
111 |     margin-bottom: 1em;
112 |   }
113 | }
114 | 
115 | .chakra-stat {
116 |   font-family: 'Sora', sans-serif;
117 |   display: flex !important;
118 |   justify-content: center !important;
119 | }
120 | 
121 | .chakra-stat__number {
122 |   font-family: 'Sora', sans-serif;
123 |   color: #4B3CFF;
124 | }
125 | 
126 | 
127 | body.dark-mode .main-button {
128 |   border: none;
129 |   background: linear-gradient(-45deg, #514A9D, #24C6DC);
130 |   color: #f5f5f5;
131 | 
132 | }


--------------------------------------------------------------------------------
/src/components/input/input.scss:
--------------------------------------------------------------------------------
  1 | .input-box-small {
  2 |     top: 70px !important;
  3 |     transition: .3s ease;
  4 | }
  5 | 
  6 | .app-inputbox {
  7 |     position: fixed;
  8 |     top: 240px;
  9 |     left: 50%;
 10 |     transform: translatex(-50%);
 11 |     z-index: 3;
 12 |     width: 35vw;
 13 |     transition: .3s ease;
 14 | 
 15 |     .main-input {
 16 |         font-family: 'Sora', sans-serif;
 17 |         position: relative;
 18 |         z-index: 3;
 19 |         height: 80px;
 20 |         border: 2px solid transparent;
 21 |         background-color: #fff;
 22 |         padding-left: 1.5em;
 23 |         font-size: 20px;
 24 |         font-weight: 500;
 25 |         color: #333; 
 26 | 
 27 |         &:hover {
 28 |             border: 2px solid transparent;
 29 |         }
 30 | 
 31 |         &:focus {
 32 |             border: 2px solid transparent;
 33 |             box-shadow: 0 0 0 2px rgba(109, 107, 228, 0.2);
 34 |         }
 35 |     }
 36 | 
 37 |     .dummy-input {
 38 |         position: absolute;
 39 |         left: 0;
 40 |         z-index: 0;
 41 |         box-shadow: 0 10px 50px rgba(17, 17, 17, 0.35);
 42 |     }
 43 | 
 44 | 
 45 |     &:hover .dummy-input {
 46 |         box-shadow: 0 10px 25px rgba(17, 17, 17, 0.35) !important;
 47 |     
 48 |     }
 49 | 
 50 | 
 51 |     .main-button {
 52 |         font-family: 'Sora', sans-serif;
 53 |         font-weight: 500;
 54 |         border: none;
 55 |         background: #4B3CFF !important;
 56 |         color: #f5f5f5;
 57 |         min-width: 100px;
 58 |         right: 1.5em;
 59 |         height: 40px;
 60 |         z-index: 4;
 61 |         position: absolute;
 62 |         top: 50%;
 63 |         transition: .3s ease;
 64 |         transform: translatey(-50%);
 65 | 
 66 |         &:hover {
 67 |             background: #24C6DC;
 68 |             opacity: 0.8;
 69 |             transition: .3s ease;
 70 |         }
 71 | 
 72 |         &:focus {
 73 |             border: none;
 74 |             box-shadow: 0 0 0 3px rgba(109, 107, 228, 0.5);
 75 |         }
 76 |     }
 77 | }
 78 | 
 79 | @media only screen and (max-width: 500px) {
 80 |     .app-inputbox {
 81 |         width: 95vw;
 82 |     }
 83 | 
 84 |     .input-box-small {
 85 |         top: 90px !important;
 86 |         transition: .3s ease;
 87 |     }
 88 |   }
 89 | 
 90 |   @media only screen and (max-width: 1200px) {
 91 |     .app-inputbox {
 92 |         width: 80%;
 93 |     }
 94 | 
 95 |     .input-box-small {
 96 |         top: 90px !important;
 97 |         transition: .3s ease;
 98 |     }
 99 |   }
100 | 
101 |   @media only screen and (max-width: 500px) {
102 |     .app-inputbox {
103 |         width: 95%;
104 | 
105 |         .main-input {
106 |             font-size: 14px;
107 |         }
108 |     }
109 | 
110 |     .input-box-small {
111 |         top: 90px !important;
112 |         transition: .3s ease;
113 |     }
114 |   }


--------------------------------------------------------------------------------
/src/assets/ipwire-logo.svg:
--------------------------------------------------------------------------------
 1 | <svg width="100" height="33" viewBox="0 0 100 33" fill="none" xmlns="http://www.w3.org/2000/svg">
 2 | <path d="M6.2992 9.62109C7.39562 9.62255 8.44671 10.0587 9.22199 10.834C9.99727 11.6093 10.4335 12.6604 10.4349 13.7568L10.4266 27.8782C10.4349 28.8518 11.2338 29.6506 12.1907 29.6423C13.1727 29.6423 13.9632 28.8518 13.9632 27.8698L13.9632 20.8133L13.9549 14.9301L16.3268 14.9131L16.3098 20.8133L16.3265 27.8865C16.317 28.976 15.88 30.0182 15.1095 30.7886C14.3391 31.5591 13.2969 31.9961 12.2074 32.0056C9.919 31.9972 8.07166 30.1499 8.07998 27.8782L8.07998 13.7485C8.07166 12.7749 7.27281 11.976 6.31585 11.9844C5.33393 11.9844 4.5434 12.7749 4.5434 13.7568L4.5434 20.8133H6.30753L6.31585 26.6965H5.71671L5.72504 29.0515C5.72504 29.7005 5.19246 30.2331 4.53507 30.2414L2.18844 30.2248C1.52273 30.2082 1.01513 29.7006 1.01513 29.0515L1.00681 26.7132L0.424316 26.6965L0.432647 20.8133H2.19678L2.18013 13.7402C2.1896 12.6506 2.62661 11.6084 3.39705 10.838C4.16748 10.0676 5.20969 9.63056 6.2992 9.62109ZM4.55172 26.6965L2.18846 26.6965L2.19677 29.0515L4.5434 29.0515L4.55172 26.6965Z" fill="white"/>
 3 | <path d="M15.1614 4.85863C16.482 4.85863 17.5715 3.76915 17.5715 2.41555C17.5715 1.06196 16.482 0.00549316 15.1614 0.00549316C13.7748 0.00549316 12.6853 1.06196 12.6853 2.41555C12.6853 3.76915 13.7748 4.85863 15.1614 4.85863ZM13.1475 24.4363H17.1753V8.12707H13.1475V24.4363Z" fill="white"/>
 4 | <path d="M20.6764 31.9966H24.7041V22.2573C25.7276 23.908 27.8405 24.8654 30.2836 24.8654C35.1367 24.8654 37.91 21.1678 37.91 16.0836C37.91 10.9663 34.8726 7.63185 30.2836 7.63185C27.8075 7.63185 25.6616 8.72133 24.6711 10.6032L24.407 8.12707H20.6764V31.9966ZM24.7372 16.2817C24.7372 13.3434 26.553 11.2965 29.3262 11.2965C32.1654 11.2965 33.8492 13.3764 33.8492 16.2817C33.8492 19.1869 32.1654 21.2338 29.3262 21.2338C26.553 21.2338 24.7372 19.22 24.7372 16.2817Z" fill="white"/>
 5 | <path d="M43.2493 24.4363H47.178L49.423 17.4372C50.2484 14.763 50.5455 13.6075 50.7106 12.8482C50.8426 13.6735 51.2058 15.2252 51.8661 17.3711L54.1111 24.4363H57.8747L63.5202 8.12707H59.2614L57.0824 15.1262C56.7853 16.1496 56.257 18.0975 55.9929 19.319C55.7948 18.2295 55.1345 15.7864 54.9365 15.1262L52.7575 8.12707H48.6637L46.4187 15.1262C45.8905 16.7439 45.5933 17.7673 45.2962 19.352C44.9991 17.8333 44.6689 16.4137 44.3058 15.1262L42.1598 8.12707H37.967L43.2493 24.4363Z" fill="white"/>
 6 | <path d="M67.3128 4.85863C68.6334 4.85863 69.7228 3.76915 69.7228 2.41555C69.7228 1.06196 68.6334 0.00549316 67.3128 0.00549316C65.9262 0.00549316 64.8367 1.06196 64.8367 2.41555C64.8367 3.76915 65.9262 4.85863 67.3128 4.85863ZM65.2989 24.4363H69.3267V8.12707H65.2989V24.4363Z" fill="white"/>
 7 | <path d="M83.0623 8.06104C82.402 7.89597 81.8407 7.82994 81.2795 7.82994C79.1005 7.82994 77.5488 8.91942 76.8555 10.5371L76.6244 8.16008H72.8278V24.4363H76.8555V16.5128C76.8555 13.3434 78.6713 11.7917 81.5766 11.7917H83.0623V8.06104Z" fill="white"/>
 8 | <path d="M91.8764 24.8654C96.1353 24.8654 99.1066 22.7195 99.7999 19.1539H96.0692C95.607 20.7056 94.1544 21.564 91.9424 21.564C89.2682 21.564 87.7496 20.1114 87.4524 17.2391L99.7338 17.2061V15.9845C99.7338 10.9003 96.6305 7.63185 91.7443 7.63185C86.9572 7.63185 83.6227 11.1644 83.6227 16.2817C83.6227 21.3329 87.0232 24.8654 91.8764 24.8654ZM91.7773 10.9333C94.1874 10.9333 95.7391 12.419 95.7391 14.664H87.5515C87.9477 12.2209 89.4003 10.9333 91.7773 10.9333Z" fill="white"/>
 9 | </svg>
10 | 


--------------------------------------------------------------------------------
/src/components/content/contentbox.scss:
--------------------------------------------------------------------------------
  1 | .content-wrapper {
  2 |     margin-top: 360px;
  3 | }
  4 | 
  5 | .loader {
  6 |     width: 100vw;
  7 |     height: 100vh;
  8 |     position: absolute;
  9 |     background: linear-gradient(45deg, #514a9d, #4b3cff);
 10 |     z-index: 99;
 11 |     display: flex;
 12 |     flex-direction: column;
 13 |     justify-content: center;
 14 |     align-items: center;
 15 | 
 16 |     p {
 17 |         color: #fff;
 18 |         margin-top: 1em;
 19 |         text-align: center;
 20 |         max-width: 30ch;
 21 |     }
 22 | }
 23 | 
 24 | .placeholder-map {
 25 |     margin-top: 360px;
 26 |     height: 600px;
 27 |     width: 100vw;
 28 |     background-image: url("../../assets/map.png");
 29 |     background-repeat: no-repeat;
 30 |     background-size: cover;
 31 |     opacity: 0.2;
 32 |     z-index: 2;
 33 |     position: relative;
 34 |     top: -80px;
 35 | 
 36 |     .map-overlay {
 37 |         position: absolute;
 38 |         width: 100%;
 39 |         height: 100%;
 40 |         opacity: 0.5;
 41 |         top: 0;
 42 |         left: 0;
 43 |         background: linear-gradient(45deg, #514a9d, #24c6dc);
 44 |     }
 45 | }
 46 | 
 47 | .general-content {
 48 |     position: relative;
 49 |     top: -140px;
 50 |     box-shadow: 0 0 50px rgba(17, 17, 17, 0.12);
 51 |     border-radius: 5px;
 52 |     padding: 1.5em;
 53 |     justify-content: space-between;
 54 |     display: flex;
 55 |     width: 60%;
 56 |     margin: 0 auto;
 57 | 
 58 |     .details-list {
 59 |         display: flex;
 60 |         width: 100%;
 61 |         flex-direction: column;
 62 | 
 63 |         .details-list-item {
 64 |             display: flex;
 65 |             justify-content: space-between;
 66 |             width: 100%;
 67 |             border-bottom: 1px solid #2f2d41;
 68 |             padding: 20px 0;
 69 |             margin-bottom: 15px;
 70 | 
 71 |             &:last-child {
 72 |                 border: none;
 73 |             }
 74 | 
 75 |             .list-item-title {
 76 |                 color: #4b3cff;
 77 |                 font-family: "Sora", sans-serif;
 78 |                 margin-right: 2em;
 79 |                 font-weight: 700;
 80 |             }
 81 | 
 82 |             .list-item-descrip {
 83 |                 font-family: "Sora", sans-serif;
 84 |             }
 85 |         }
 86 |     }
 87 | }
 88 | 
 89 | .content-section-title {
 90 |     width: 60%;
 91 |     margin: 0 auto;
 92 |     color: #4b3cff;
 93 |     z-index: 2;
 94 |     position: relative;
 95 |     top: -100px;
 96 | 
 97 |     .section-title {
 98 |         margin: 2em 0;
 99 |         font-size: 30px;
100 |         font-family: "Sora", sans-serif;
101 |         font-weight: 700;
102 |     }
103 | }
104 | 
105 | .content-flag {
106 |     width: 250px;
107 |     position: absolute;
108 |     justify-content: space-between;
109 |     height: 80px;
110 |     background-color: #fff;
111 |     box-shadow: 0 0 50px rgba(17, 17, 17, 0.35);
112 |     border-radius: 5px;
113 |     display: flex;
114 |     align-items: center;
115 |     padding: 0 2em;
116 |     bottom: 2em;
117 |     left: 50%;
118 |     transform: translatex(-50%);
119 |     z-index: 999;
120 | 
121 |     .flag-img {
122 |         border-radius: 5px;
123 |     }
124 | 
125 |     .street-link {
126 |         display: flex;
127 |         align-items: center;
128 |         font-family: "Sora", sans-serif;
129 |         font-weight: 600;
130 |         font-size: 14px;
131 |         color: #fff;
132 |         background: #4b3cff !important;
133 |         border-radius: 5px;
134 |         padding: 7px 15px;
135 | 
136 |         i {
137 |             font-size: 15px;
138 |             margin-right: 5px;
139 |         }
140 |     }
141 | }
142 | 
143 | .download-container {
144 |     width: 60%;
145 |     margin: 0 auto;
146 |     height: 100px;
147 |     position: relative;
148 |     top: -50px;
149 |     display: flex;
150 |     align-items: flex-start;
151 | 
152 |     .download-button {
153 |         font-family: "Sora", sans-serif;
154 |         font-weight: 500;
155 |         border: none;
156 |         background: #4b3cff !important;
157 |         color: #f5f5f5;
158 |         padding: 15px 25px;
159 |         z-index: 4;
160 |         border-radius: 5px;
161 |         transition: 0.3s ease;
162 |         margin-right: .5em;
163 |         transform: translatey(-50%);
164 | 
165 |         span {
166 |             font-size: 14px;
167 |             opacity: 0.5;
168 |         }
169 | 
170 |         &:hover {
171 |             opacity: 0.8 !important;
172 |             transition: 0.3s ease;
173 |         }
174 | 
175 |         &:focus {
176 |             border: none;
177 |             box-shadow: 0 0 0 3px rgba(109, 107, 228, 0.5);
178 |         }
179 |     }
180 | }
181 | 
182 | .pdf-title {
183 |     margin-bottom: 2em;
184 | }
185 | 
186 | @media only screen and (max-width: 1200px) {
187 |     .content-section-title {
188 |         width: 80%;
189 |     }
190 | 
191 |     .download-container {
192 |         width: 80%;
193 |     }
194 | 
195 |     .general-content {
196 |         width: 80%;
197 |         flex-direction: column;
198 |         justify-content: flex-start;
199 |         align-items: flex-start;
200 |     }
201 | }
202 | 
203 | @media only screen and (max-width: 500px) {
204 |     .content-section-title {
205 |         width: 95%;
206 |     }
207 | 
208 |     .download-container {
209 |         width: 95%;
210 |     }
211 | 
212 |     .general-content {
213 |         width: 95%;
214 |     }
215 | }
216 | 


--------------------------------------------------------------------------------
/src/components/content/ContentBox.js:
--------------------------------------------------------------------------------
  1 | /* eslint-disable react/style-prop-object */
  2 | import { Spinner, Stat, StatLabel, StatNumber } from "@chakra-ui/react";
  3 | import React, { useMemo } from "react";
  4 | import { MapContainer, Marker, TileLayer } from "react-leaflet";
  5 | import pdf, { PDFDocument,PDFText } from 'react-pdfmake';
  6 | import "./contentbox.scss";
  7 | 
  8 | export const ContentBox = ({ content, country }) => {
  9 | 
 10 |   const pdfFile = useMemo((pdfcontent, pdfcountry) => {
 11 |     if (content.ip) {
 12 |       pdfcontent = content;
 13 |       pdfcountry = country;
 14 |     }
 15 |     return pdf(
 16 |       <PDFDocument
 17 |         pageSize="A5"
 18 |         pageOrientation="portrait"
 19 |         pageBreakBefore={(currentNode, followingNodesOnPage) => {
 20 |           return (
 21 |             currentNode.headlineLevel === 1 && followingNodesOnPage.length === 0
 22 |           );
 23 |         }}
 24 |         styles={{
 25 |           header: {
 26 |             fontSize: 18,
 27 |             margin: [0, 20, 0, 10],
 28 |           }
 29 |         }}
 30 |       >
 31 |         <PDFText color="gray" italics style="header">
 32 |           {`IP Address: ${pdfcontent?.ip}`}
 33 |         </PDFText>
 34 |         <PDFText color="gray" italics style="header">
 35 |           {`General`}
 36 |         </PDFText>
 37 |         <PDFText>{`Continent: ${pdfcontent?.region}`}</PDFText>
 38 |         <PDFText>{`Country: ${pdfcontent?.country_name} (${content?.country_code})`}</PDFText>
 39 |         <PDFText>{`Region: ${pdfcontent?.region} (${content?.region_code})`}</PDFText>
 40 |         <PDFText>{`City: ${pdfcontent?.city}`}</PDFText>
 41 | 
 42 |         <PDFText color="gray" italics style="header">
 43 |           {`Details`}
 44 |         </PDFText>
 45 |         <PDFText>{`EU Member: ${pdfcontent?.in_eu ? 'Yes' : 'No'}`}</PDFText>
 46 |         <PDFText>{`Population: ${pdfcountry?.population}`}</PDFText>
 47 |         <PDFText>{`Subregion: ${pdfcountry?.subregion}`}</PDFText>
 48 |         <PDFText>{`Currency: ${pdfcontent?.currency_name} (${pdfcontent?.currency})`}</PDFText>
 49 |         <PDFText>{`Zip Code: ${pdfcontent?.postal}`}</PDFText>
 50 |         <PDFText>{`Capital: ${pdfcontent?.country_capital}`}</PDFText>
 51 |         <PDFText>{`Timezone: ${pdfcountry?.timezones}`}</PDFText>
 52 |         <PDFText>{`Coordinates: ${content?.latitude}, ${content?.longitude}`}</PDFText>
 53 |       </PDFDocument>
 54 |     )
 55 |   }, [content, country]);
 56 | 
 57 |   return (
 58 |     <>
 59 |       {content.ip && (
 60 |         <div className="content-wrapper">
 61 |           <MapContainer center={[content.latitude, content.longitude]} zoom={4} scrollWheelZoom={false} dragging={true} touchZoom={true}>
 62 |             <TileLayer
 63 |               attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a>'
 64 |               url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
 65 |             />
 66 |             <Marker position={[content.latitude, content.longitude]}></Marker>
 67 |             <div className="content-flag">
 68 |               <img
 69 |                 className="flag-img"
 70 |                 width="50px"
 71 |                 height="50px"
 72 |                 src={country?.flags?.svg}
 73 |                 alt="country-flag"
 74 |               />
 75 |               <a
 76 |                 className="street-link"
 77 |                 target="_blank"
 78 |                 rel="noreferrer"
 79 |                 href={`http://maps.google.com/maps?q=&layer=c&cbll=${content.latitude},${content.longitude}`}
 80 |               >
 81 |                 <i className={"eva eva-map-outline"}></i>
 82 |                 Street View
 83 |               </a>
 84 |             </div>
 85 |           </MapContainer>
 86 |           <div className="content-section-title">
 87 |             <h2 className="section-title">General</h2>
 88 |           </div>
 89 |           <div className="general-content">
 90 |             <Stat>
 91 |               <StatLabel>Continent</StatLabel>
 92 |               <StatNumber>{`${country.region} (${content.continent_code})`}</StatNumber>
 93 |             </Stat>
 94 |             <Stat>
 95 |               <StatLabel>Country</StatLabel>
 96 |               <StatNumber>{`${content.country_name} (${content.country_code})`}</StatNumber>
 97 |             </Stat>
 98 |             <Stat>
 99 |               <StatLabel>Region</StatLabel>
100 |               <StatNumber>{`${content.region} (${content.region_code})`}</StatNumber>
101 |             </Stat>
102 |             <Stat>
103 |               <StatLabel>City</StatLabel>
104 |               <StatNumber>{`${content.city}`}</StatNumber>
105 |             </Stat>
106 |           </div>
107 | 
108 |           <div className="content-section-title">
109 |             <h2 className="section-title">Details</h2>
110 |           </div>
111 | 
112 |           <div className="general-content">
113 |             <div className="details-list">
114 |               <div className="details-list-item">
115 |                 <h3 className="list-item-title">EU Member</h3>
116 |                 <p className="list-item-descrip">{content.in_eu ? 'Yes' : 'No'}</p>
117 |               </div>
118 |               <div className="details-list-item">
119 |                 <h3 className="list-item-title">Population</h3>
120 |                 <p className="list-item-descrip">{country.population}</p>
121 |               </div>
122 |               <div className="details-list-item">
123 |                 <h3 className="list-item-title">Subregion</h3>
124 |                 <p className="list-item-descrip">{country.subregion}</p>
125 |               </div>
126 |               <div className="details-list-item">
127 |                 <h3 className="list-item-title">Currency</h3>
128 |                 <p className="list-item-descrip">{`${content.currency_name} (${content.currency})`}</p>
129 |               </div>
130 |               <div className="details-list-item">
131 |                 <h3 className="list-item-title">Zip Code</h3>
132 |                 <p className="list-item-descrip">{content.postal}</p>
133 |               </div>
134 |               <div className="details-list-item">
135 |                 <h3 className="list-item-title">Capital</h3>
136 |                 <p className="list-item-descrip">{content.country_capital}</p>
137 |               </div>
138 |               <div className="details-list-item">
139 |                 <h3 className="list-item-title">Timezone</h3>
140 |                 <p className="list-item-descrip">{country.timezones}</p>
141 |               </div>
142 |               <div className="details-list-item">
143 |                 <h3 className="list-item-title">Coordinates</h3>
144 |                 <p className="list-item-descrip">{`${content.latitude.toFixed(2)}, ${content.longitude.toFixed(2)}`}</p>
145 |               </div>
146 |             </div>
147 |           </div>
148 |           <div className="download-container">
149 |             <button className="download-button" onClick={() => pdfFile.download(`IP Data - ${content?.ip}.pdf`)}>
150 |               Download Info <span>(pdf)</span>
151 |             </button>
152 |             <button className="download-button" onClick={() => pdfFile.print()}>
153 |               Print Info
154 |             </button>
155 |           </div>
156 |         </div>
157 |       )}
158 |       {!content.ip && (
159 |         <div className="loader">
160 |           <Spinner size="xl" color={'#fff'} />
161 |           <p>Please enable trackers in your browser for this application to work.</p>
162 |         </div>
163 |       )}
164 |     </>
165 |   );
166 | };
167 | 


--------------------------------------------------------------------------------