Add an option to directly change the querry url in settings

components/Settings/SettingsMenu.tsx

@@ -1,4 +1,14 @@
-import { ActionIcon, Group, Modal, Switch, Title, Text, Tooltip, TextInput } from '@mantine/core';
+import {
+  ActionIcon,
+  Group,
+  Modal,
+  Switch,
+  Title,
+  Text,
+  Tooltip,
+  TextInput,
+  SegmentedControl,
+} from '@mantine/core';
 import { useState } from 'react';
 import { Settings as SettingsIcon } from 'tabler-icons-react';
 import { useConfig } from '../../tools/state';
@@ -6,22 +16,35 @@ import SaveConfigComponent from '../Config/SaveConfig';
 
 function SettingsMenu(props: any) {
   const { config, setConfig } = useConfig();
-
+  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=' },
+  ];
   return (
     <Group direction="column" grow>
-      <TextInput
-        label="Search bar querry url"
-        defaultValue={config.settings.searchUrl}
-        onChange={(e) =>
+      <Group>
+        <SegmentedControl
+          title="Search engine"
+          defaultValue={
+            // Match config.settings.searchUrl with a key in the matches array
+            matches.find((match) => match.value === config.settings.searchUrl)?.value || 'Google'
+          }
+          onChange={
+            // Set config.settings.searchUrl to the value of the selected item
+            (e) =>
               setConfig({
                 ...config,
                 settings: {
                   ...config.settings,
-              searchUrl: e.target.value,
+                  searchUrl: e,
                 },
               })
           }
+          data={matches}
         />
+        <Text>Search engine</Text>
+      </Group>
       <Group direction="column">
         <Switch
           onChange={(e) =>