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 (
-    <TextInput
+    <form onSubmit={form.onSubmit((values) => window.open(`${querryUrl}${values.querry}`))}>
-      icon={<Search size={18} />}
+      <TextInput
-      radius="xl"
+        icon={<Search size={18} />}
-      size="md"
+        radius="xl"
-      placeholder="Search the web"
+        size="md"
-      onChange={(e) => {
+        placeholder="Search the web"
-        showNotification({
+        rightSectionWidth={42}
-          autoClose: 1000,
+        {...props}
-          title: <Text>Searching for {e.target.value}</Text>,
+        {...form.getInputProps('querry')}
-          message: undefined,
+      />
-        });
+    </form>
-      }}
-      rightSectionWidth={42}
-      {...props}
-    />
   );
 }

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,24 +19,42 @@ function SettingsMenu(props: any) {
     }
   }, []);
   return (
-    <Group direction="column">
+    <Group direction="column" grow>
-      <Switch
+      
-        onChange={(e) => {
+      <TextInput label='Search bar querry url' defaultValue={config.searchUrl} onChange={
+        (e) => {
           setConfig({
             ...config,
-            searchBar: e.target.checked,
+            searchUrl: e.target.value
           });
           localStorage.setItem(
             'settings',
             JSON.stringify({
               ...config,
-              searchBar: e.target.checked,
+              searchUrl: e.target.value,
             })
           );
-        }}
+        }
-        checked={config.searchBar}
+      } />
-        label="Enable search bar"
+      <Group direction="column" >
-      />
+        <Switch
+          onChange={(e) => {
+            setConfig({
+              ...config,
+              searchBar: e.target.checked,
+            });
+            localStorage.setItem(
+              'settings',
+              JSON.stringify({
+                ...config,
+                searchBar: e.target.checked,
+              })
+            );
+          }}
+          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,
 }