88 lines
2.4 KiB
TypeScript
88 lines
2.4 KiB
TypeScript
import { useState } from 'react'
|
|
import { ThemeProvider, Flex, Box } from 'theme-ui'
|
|
import { theme } from '../theme'
|
|
import {
|
|
Wifi,
|
|
MessageSquare,
|
|
FileText,
|
|
MapPin,
|
|
Globe,
|
|
Info,
|
|
Settings,
|
|
Sliders,
|
|
} from 'react-feather'
|
|
import VpnIcon from '../assets/vpnIcon.svg'
|
|
import TabItem from './TabItem'
|
|
import LocationPage from './Pages/LocationPage'
|
|
import UserAgentPage from './Pages/UserAgentPage'
|
|
import VpnPage from './Pages/VpnPage'
|
|
import SettingsPage from './Pages/SettingsPage'
|
|
import '../assets/global.css'
|
|
|
|
const Popup = () => {
|
|
const [tab, setTab] = useState('location')
|
|
|
|
return (
|
|
<ThemeProvider theme={theme}>
|
|
<Flex sx={{ height: '100%' }}>
|
|
<Flex
|
|
sx={{
|
|
minWidth: '36px',
|
|
backgroundColor: 'primary',
|
|
alignItems: 'center',
|
|
flexDirection: 'column',
|
|
}}
|
|
>
|
|
{/* <TabItem
|
|
Icon={<Wifi size={20} />}
|
|
active={tab === 'vpn'}
|
|
onClick={() => setTab('vpn')}
|
|
/> */}
|
|
<TabItem
|
|
Icon={<MapPin size={20} />}
|
|
active={tab === 'location'}
|
|
onClick={() => setTab('location')}
|
|
/>
|
|
{/* <TabItem
|
|
Icon={<FileText size={20} />}
|
|
active={tab === 'vpn'}
|
|
onClick={() => setTab('vpn')}
|
|
/> */}
|
|
{/* <TabItem
|
|
Icon={<MessageSquare size={20} />}
|
|
active={tab === 'vpn'}
|
|
onClick={() => setTab('vpn')}
|
|
/> */}
|
|
<TabItem
|
|
Icon={<Globe size={20} />}
|
|
active={tab === 'userAgent'}
|
|
onClick={() => setTab('userAgent')}
|
|
/>
|
|
<TabItem
|
|
Icon={<img src={VpnIcon} className="App-logo" alt="logo" />}
|
|
active={tab === 'vpn'}
|
|
onClick={() => setTab('vpn')}
|
|
/>
|
|
{/* <TabItem
|
|
Icon={<Sliders size={20} />}
|
|
active={tab === 'settings'}
|
|
onClick={() => setTab('settings')}
|
|
/> */}
|
|
<TabItem
|
|
Icon={<Info size={20} />}
|
|
active={tab === 'settings'}
|
|
onClick={() => setTab('settings')}
|
|
/>
|
|
</Flex>
|
|
<Box sx={{ m: '16px', width: '100%' }}>
|
|
<LocationPage tab={tab} setTab={setTab} />
|
|
<UserAgentPage tab={tab} />
|
|
<VpnPage tab={tab} />
|
|
<SettingsPage tab={tab} setTab={setTab} />
|
|
</Box>
|
|
</Flex>
|
|
</ThemeProvider>
|
|
)
|
|
}
|
|
|
|
export default Popup
|