diff --git a/src/components/Settings/SettingsMenu.tsx b/src/components/Settings/SettingsMenu.tsx index 061ef2165..592569f1a 100644 --- a/src/components/Settings/SettingsMenu.tsx +++ b/src/components/Settings/SettingsMenu.tsx @@ -9,6 +9,7 @@ import { SegmentedControl, Indicator, Alert, + TextInput, } from '@mantine/core'; import { useColorScheme } from '@mantine/hooks'; import { useEffect, useState } from 'react'; @@ -24,11 +25,19 @@ function SettingsMenu(props: any) { const { config, setConfig } = useConfig(); const colorScheme = useColorScheme(); const { current, latest } = props; + const matches = [ { label: 'Google', value: 'https://google.com/search?q=' }, { label: 'DuckDuckGo', value: 'https://duckduckgo.com/?q=' }, { label: 'Bing', value: 'https://bing.com/search?q=' }, + { label: 'Custom', value: 'Custom' }, ]; + + const [customSearchUrl, setCustomSearchUrl] = useState(config.settings.searchUrl); + const [searchUrl, setSearchUrl] = useState( + matches.find((match) => match.value === config.settings.searchUrl)?.value ?? 'Custom' + ); + return ( Version {latest} is available. Current : {current} - + + Search engine match.value === config.settings.searchUrl)?.value ?? 'Google' + searchUrl } onChange={ // Set config.settings.searchUrl to the value of the selected item - (e) => + (e) => { + setSearchUrl(e); setConfig({ ...config, settings: { ...config.settings, searchUrl: e, }, - }) + }); + } } data={matches} /> - Search engine + {searchUrl === 'Custom' && ( + { + setCustomSearchUrl(event.currentTarget.value); + setConfig({ + ...config, + settings: { + ...config.settings, + searchUrl: event.currentTarget.value, + }, + }); + }} + /> + )}