Added tab navigation

src/pages/Popup/ConfigurationSelect.tsx

@@ -14,7 +14,6 @@ const ConfigurationSelect = ({
 }: ConfigurationSelectProps) => {
   const changeConfiguration = (e: any) => {
     detachDebugger()
-    console.log(e.target.value)
     chrome.storage.sync.set({
       configuration: e.target.value,
     })

src/pages/Popup/HomePage.tsx

@@ -0,0 +1,68 @@
+import React, { useState, useEffect } from 'react'
+import { Box } from 'theme-ui'
+import DataInput from './DataInput'
+import ConfigurationSelect from './ConfigurationSelect'
+import IPData from './IPData'
+import getIP from '../../utils/getIP'
+
+const LocationPage = () => {
+  const [ip, setIP] = useState(null)
+  const [configuration, setConfiguration] = useState('default')
+
+  useEffect(() => {
+    chrome.storage.sync.get(['configuration', 'ipData'], (result) => {
+      result.configuration && setConfiguration(result.configuration)
+      if (result.ipData) {
+        setIP(result.ipData)
+      } else {
+        Promise.resolve(getIP()).then((ipData) => setIP(ipData))
+      }
+    })
+  }, [])
+
+  return (
+    <Box
+      sx={{
+        m: '12px',
+        width: '100%',
+      }}
+    >
+      <Box sx={{ fontSize: '20px', mb: '8px' }}>Location</Box>
+      <ConfigurationSelect
+        configuration={configuration}
+        setConfiguration={setConfiguration}
+      />
+      {configuration === 'match' && <IPData ip={ip} setIP={setIP} />}
+      <DataInput
+        type="timezone"
+        title="Timezone"
+        ip={ip}
+        configuration={configuration}
+        setConfiguration={setConfiguration}
+      />
+      <DataInput
+        type="locale"
+        title="Locale"
+        ip={ip}
+        configuration={configuration}
+        setConfiguration={setConfiguration}
+      />
+      <DataInput
+        type="lat"
+        title="Latitude"
+        ip={ip}
+        configuration={configuration}
+        setConfiguration={setConfiguration}
+      />
+      <DataInput
+        type="lon"
+        title="Longitude"
+        ip={ip}
+        configuration={configuration}
+        setConfiguration={setConfiguration}
+      />
+    </Box>
+  )
+}
+
+export default LocationPage

src/pages/Popup/LocationPage.tsx

@@ -11,7 +11,6 @@ const LocationPage = () => {
 
   useEffect(() => {
     chrome.storage.sync.get(['configuration', 'ipData'], (result) => {
-      console.log(result.configuration)
       result.configuration && setConfiguration(result.configuration)
       if (result.ipData) {
         setIP(result.ipData)

src/pages/Popup/Page.tsx

@@ -0,0 +1,27 @@
+import React from 'react'
+import HomePage from './HomePage'
+import LocationPage from './LocationPage'
+import UserAgentPage from './UserAgentPage'
+
+interface PageProps {
+  tab: number
+}
+
+const Page = ({ tab }: PageProps) => {
+  switch (tab) {
+    case 0:
+      return <HomePage />
+    case 1:
+      return <LocationPage />
+    case 2:
+      return <UserAgentPage />
+    case 3:
+      return <HomePage />
+    case 4:
+      return <HomePage />
+    default:
+      return <HomePage />
+  }
+}
+
+export default Page

src/pages/Popup/Popup.tsx

@@ -2,20 +2,14 @@ import React, { useState, useEffect } from 'react'
 import { ThemeProvider, Flex } from 'theme-ui'
 import { theme } from '../../theme'
 import { Home, MapPin, Globe, Users, List } from 'react-feather'
-import Icon from './Icon'
-import LocationPage from './LocationPage'
-// import Navbar from './Navbar'
-// import IPData from './IPData'
-// import ProfileSelect from './ProfileSelect'
-// import DebugSettings from './DebugSettings'
-// import UserAgentSettings from './UserAgentSettings'
+import TabItem from './TabItem'
+import Page from './Page'
 
 const Popup = () => {
-  // const [ip, setIP] = useState(null)
-  // const [profile, setProfile] = useState('default')
-
-  // useEffect(() => {}, [])
-
+  const [tab, setTab] = useState(0)
+  useEffect(() => {
+    console.log(tab)
+  }, [tab])
   return (
     <ThemeProvider theme={theme}>
       <Flex
@@ -32,13 +26,13 @@ const Popup = () => {
             flexDirection: 'column',
           }}
         >
-          <Icon icon={<Home size={20} />} />
-          <Icon icon={<MapPin size={20} />} />
-          <Icon icon={<Globe size={20} />} />
-          <Icon icon={<List size={20} />} />
-          <Icon icon={<Users size={20} />} />
+          <TabItem Icon={Home} onClick={() => setTab(0)} />
+          <TabItem Icon={MapPin} onClick={() => setTab(1)} />
+          <TabItem Icon={Globe} onClick={() => setTab(2)} />
+          <TabItem Icon={List} onClick={() => setTab(3)} />
+          <TabItem Icon={Users} onClick={() => setTab(4)} />
         </Flex>
-        <LocationPage />
+        <Page tab={tab} />
       </Flex>
     </ThemeProvider>
   )

src/pages/Popup/TabItem.tsx

@@ -1,10 +1,11 @@
-import React, { useState, useEffect } from 'react'
+import React from 'react'
 
 interface IconProps {
-  icon: React.ReactNode
+  Icon: React.ElementType
+  onClick: () => void
 }
 
-const Icon = ({ icon }: IconProps) => {
+const TabItem = ({ Icon, onClick }: IconProps) => {
   return (
     <div
       sx={{
@@ -19,10 +20,11 @@ const Icon = ({ icon }: IconProps) => {
           backgroundColor: 'primaryDark',
         },
       }}
+      onClick={onClick}
     >
-      {icon}
+      <Icon size={20} />
     </div>
   )
 }
 
-export default Icon
+export default TabItem

src/pages/Popup/UserAgentPage.tsx

@@ -0,0 +1,66 @@
+import React, { useState, useEffect } from 'react'
+import { Box } from 'theme-ui'
+import DataInput from './DataInput'
+import ConfigurationSelect from './ConfigurationSelect'
+import getIP from '../../utils/getIP'
+
+const LocationPage = () => {
+  const [ip, setIP] = useState(null)
+  const [configuration, setConfiguration] = useState('default')
+
+  useEffect(() => {
+    chrome.storage.sync.get(['configuration', 'ipData'], (result) => {
+      result.configuration && setConfiguration(result.configuration)
+      if (result.ipData) {
+        setIP(result.ipData)
+      } else {
+        Promise.resolve(getIP()).then((ipData) => setIP(ipData))
+      }
+    })
+  }, [])
+
+  return (
+    <Box
+      sx={{
+        m: '12px',
+        width: '100%',
+      }}
+    >
+      <Box sx={{ fontSize: '20px', mb: '8px' }}>User Agent</Box>
+      <ConfigurationSelect
+        configuration={configuration}
+        setConfiguration={setConfiguration}
+      />
+      <DataInput
+        type="timezone"
+        title="Timezone"
+        ip={ip}
+        configuration={configuration}
+        setConfiguration={setConfiguration}
+      />
+      <DataInput
+        type="locale"
+        title="Locale"
+        ip={ip}
+        configuration={configuration}
+        setConfiguration={setConfiguration}
+      />
+      <DataInput
+        type="lat"
+        title="Latitude"
+        ip={ip}
+        configuration={configuration}
+        setConfiguration={setConfiguration}
+      />
+      <DataInput
+        type="lon"
+        title="Longitude"
+        ip={ip}
+        configuration={configuration}
+        setConfiguration={setConfiguration}
+      />
+    </Box>
+  )
+}
+
+export default LocationPage

src/theme.ts

@@ -11,7 +11,7 @@ export const theme: Theme = {
     root: {
       backgroundColor: 'body',
       color: 'text',
-      fontSize: '16px',
+      fontSize: '18px',
       lineHeight: '22px',
       margin: '0',
       fontFamily: "'Segoe UI', Tahoma, sans-serif",