Update settings and search bar

components/SearchBar/SearchBar.tsx

@@ -1,4 +1,5 @@
 import { Input, TextInput, Text, ActionIcon, useMantineTheme } from '@mantine/core';
+import { useForm } from '@mantine/hooks';
 import { showNotification } from '@mantine/notifications';
 import { useState, useEffect } from 'react';
 import { Search, ArrowRight, ArrowLeft } from 'tabler-icons-react';
@@ -8,6 +9,13 @@ export default function SearchBar(props: any) {
   const theme = useMantineTheme();
   const [config, setConfig] = useState<Config>({
     searchBar: true,
+    searchUrl : 'https://www.google.com/search?q=',
+  });
+  const querryUrl = config.searchUrl || 'https://www.google.com/search?q=';
+  const form = useForm({
+    initialValues: {
+      querry: '',
+    },
   });
 
   useEffect(() => {
@@ -21,21 +29,22 @@ export default function SearchBar(props: any) {
       setConfig(config);
     }
   }, []);
+
+  if (!config.searchBar) {
+    return null;
+  }
+
   return (
+    <form onSubmit={form.onSubmit((values) => window.open(`${querryUrl}${values.querry}`))}>
       <TextInput
         icon={<Search size={18} />}
         radius="xl"
         size="md"
         placeholder="Search the web"
-      onChange={(e) => {
-        showNotification({
-          autoClose: 1000,
-          title: <Text>Searching for {e.target.value}</Text>,
-          message: undefined,
-        });
-      }}
         rightSectionWidth={42}
         {...props}
+        {...form.getInputProps('querry')}
       />
+    </form>
   );
 }

components/Settings/SettingsMenu.tsx

@@ -1,4 +1,4 @@
-import { ActionIcon, Group, Modal, Switch, Title, Text, Tooltip } from '@mantine/core';
+import { ActionIcon, Group, Modal, Switch, Title, Text, Tooltip, TextInput } from '@mantine/core';
 import { showNotification } from '@mantine/notifications';
 import { motion } from 'framer-motion';
 import { CSSProperties, useEffect, useState } from 'react';
@@ -8,6 +8,7 @@ import SaveConfigComponent from '../Config/SaveConfig';
 
 function SettingsMenu(props: any) {
   const [config, setConfig] = useState<Config>({
+    searchUrl: 'https://www.google.com/search?q=',
     searchBar: true,
   });
 
@@ -18,6 +19,23 @@ function SettingsMenu(props: any) {
     }
   }, []);
   return (
+    <Group direction="column" grow>
+      
+      <TextInput label='Search bar querry url' defaultValue={config.searchUrl} onChange={
+        (e) => {
+          setConfig({
+            ...config,
+            searchUrl: e.target.value
+          });
+          localStorage.setItem(
+            'settings',
+            JSON.stringify({
+              ...config,
+              searchUrl: e.target.value,
+            })
+          );
+        }
+      } />
       <Group direction="column" >
         <Switch
           onChange={(e) => {
@@ -36,6 +54,7 @@ function SettingsMenu(props: any) {
           checked={config.searchBar}
           label="Enable search bar"
         />
+      </Group>
       <SaveConfigComponent />
       <Text
         style={{
@@ -56,7 +75,7 @@ export function SettingsMenuButton(props: any) {
   return (
     <>
       <Modal
-        size={'xl'}
+        size={'md'}
         title={<Title order={3}>Settings</Title>}
         opened={props.opened || opened}
         onClose={() => setOpened(false)}

tools/config.ts

@@ -12,5 +12,6 @@ export function loadConfig(path: string): Config | null {
 }
 
 export interface Config {
+  searchUrl: string;
 	searchBar: boolean,
 }