56 lines
1.4 KiB
TypeScript
56 lines
1.4 KiB
TypeScript
import { useState } from 'react'
|
|
import { ThemeProvider, Flex, Box } from 'theme-ui'
|
|
import { theme } from '../theme'
|
|
import { MapPin, Globe, Info } from 'react-feather'
|
|
import TabItem from './TabItem'
|
|
import LocationPage from './Pages/LocationPage'
|
|
import UserAgentPage from './Pages/UserAgentPage'
|
|
import SettingsPage from './Pages/SettingsPage'
|
|
import '../assets/global.css'
|
|
|
|
const Popup = () => {
|
|
const [tab, setTab] = useState('location')
|
|
|
|
return (
|
|
<ThemeProvider theme={theme}>
|
|
<Flex
|
|
sx={{
|
|
width: '350px',
|
|
height: '460px',
|
|
}}
|
|
>
|
|
<Flex
|
|
sx={{
|
|
minWidth: '36px',
|
|
backgroundColor: 'primary',
|
|
alignItems: 'center',
|
|
flexDirection: 'column',
|
|
}}
|
|
>
|
|
<TabItem
|
|
Icon={MapPin}
|
|
active={tab === 'location'}
|
|
onClick={() => setTab('location')}
|
|
/>
|
|
<TabItem
|
|
Icon={Globe}
|
|
active={tab === 'userAgent'}
|
|
onClick={() => setTab('userAgent')}
|
|
/>
|
|
<TabItem
|
|
Icon={Info}
|
|
active={tab === 'settings'}
|
|
onClick={() => setTab('settings')}
|
|
/>
|
|
</Flex>
|
|
<Box sx={{ m: '12px', width: '100%' }}>
|
|
<LocationPage tab={tab} />
|
|
<UserAgentPage tab={tab} />
|
|
<SettingsPage tab={tab} />
|
|
</Box>
|
|
</Flex>
|
|
</ThemeProvider>
|
|
)
|
|
}
|
|
|
|
export default Popup
|