48 lines
1.3 KiB
TypeScript
48 lines
1.3 KiB
TypeScript
import React, { Dispatch, SetStateAction, ChangeEvent } from 'react'
|
|
import { Label, Select } from 'theme-ui'
|
|
import configurations from '../../utils/configurations'
|
|
import detachDebugger from '../../utils/detachDebugger'
|
|
|
|
interface ConfigurationSelectProps {
|
|
configuration: string
|
|
setConfiguration: Dispatch<SetStateAction<string>>
|
|
}
|
|
|
|
const ConfigurationSelect = ({
|
|
configuration,
|
|
setConfiguration,
|
|
}: ConfigurationSelectProps) => {
|
|
const changeConfiguration = (e: ChangeEvent<HTMLSelectElement>) => {
|
|
detachDebugger()
|
|
chrome.storage.sync.set({
|
|
configuration: e.target.value,
|
|
})
|
|
setConfiguration(e.target.value)
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<Label htmlFor="configuration">Configuration</Label>
|
|
<Select
|
|
name="configuration"
|
|
id="configuration"
|
|
value={configuration}
|
|
onChange={changeConfiguration}
|
|
mb={'8px'}
|
|
>
|
|
<option value="none">None</option>
|
|
<option value="match">Match IP</option>
|
|
<option value="custom">Custom</option>
|
|
<optgroup label="Locations">
|
|
{Object.keys(configurations).map((key) => (
|
|
<option value={key} key={key}>
|
|
{configurations[key].name}
|
|
</option>
|
|
))}
|
|
</optgroup>
|
|
</Select>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default ConfigurationSelect
|