diff --git a/components/SearchBar/SearchBar.tsx b/components/SearchBar/SearchBar.tsx
index 723d457b8..957e1ddba 100644
--- a/components/SearchBar/SearchBar.tsx
+++ b/components/SearchBar/SearchBar.tsx
@@ -1,11 +1,28 @@
-import { Input, TextInput, Text, ActionIcon, useMantineTheme, Center } from '@mantine/core';
+import {
+ Input,
+ TextInput,
+ Text,
+ ActionIcon,
+ useMantineTheme,
+ Center,
+ Popover,
+} from '@mantine/core';
import { useForm } from '@mantine/hooks';
import { showNotification } from '@mantine/notifications';
import { useState, useEffect } from 'react';
-import { Search, ArrowRight, ArrowLeft, BrandYoutube, Download } from 'tabler-icons-react';
+import {
+ Search,
+ ArrowRight,
+ ArrowLeft,
+ BrandYoutube,
+ Download,
+ InfoCircle,
+ FileX,
+} from 'tabler-icons-react';
import { Config, loadConfig } from '../../tools/config';
export default function SearchBar(props: any) {
+ const [opened, setOpened] = useState(false);
const [icon, setIcon] = useState();
const theme = useMantineTheme();
const [config, setConfig] = useState({
@@ -20,7 +37,6 @@ export default function SearchBar(props: any) {
querry: '',
},
});
-
useEffect(() => {
const config = loadConfig('settings');
if (config) {
@@ -66,17 +82,37 @@ export default function SearchBar(props: any) {
}
})}
>
- }
- radius="md"
- rightSection={icon}
- size="md"
- placeholder="Search the web"
- {...props}
- {...form.getInputProps('querry')}
- />
+ setOpened(true)}
+ onBlurCapture={() => setOpened(false)}
+ target={
+ }
+ radius="md"
+ rightSection={icon}
+ size="md"
+ placeholder="Search the web"
+ {...props}
+ {...form.getInputProps('querry')}
+ />
+ }
+ >
+
+ tip: You can prefix your querry with !yt or !t to research on youtube or for
+ a torrent
+
+
);
}