Add search bar initial form

components/SearchBar/SearchBar.tsx

@@ -0,0 +1,41 @@
+import { Input, TextInput, Text, ActionIcon, useMantineTheme } from '@mantine/core';
+import { showNotification } from '@mantine/notifications';
+import { useState, useEffect } from 'react';
+import { Search, ArrowRight, ArrowLeft } from 'tabler-icons-react';
+import { Config, loadConfig } from '../../tools/config';
+
+export default function SearchBar(props: any) {
+  const theme = useMantineTheme();
+  const [config, setConfig] = useState<Config>({
+    searchBar: true,
+  });
+
+  useEffect(() => {
+    const config = loadConfig('settings');
+    if (config) {
+      showNotification({
+        autoClose: 1000,
+        title: <Text>Config loaded</Text>,
+        message: undefined,
+      });
+      setConfig(config);
+    }
+  }, []);
+  return (
+    <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}
+    />
+  );
+}