Dockery/Homarr
1
0
Fork 0
mirror of https://github.com/ajnart/homarr.git synced 2025-11-10 23:45:48 +01:00
Code Issues Packages Projects Releases Wiki Activity

Rework appshell and include calendar to the main page

Browse Source
This commit is contained in:
Thomas "ajnart" Camlong
2022-05-02 18:10:56 +02:00
parent 8c1dce68b7
commit 71d18a5aa6
6 changed files with 142 additions and 124 deletions
Download Patch File Download Diff File Expand all files Collapse all files

118
components/SearchBar/SearchBar.tsx
View File

@@ -6,6 +6,7 @@ import {
useMantineTheme,
Center,
Popover,
Box,
} from '@mantine/core';
import { useForm } from '@mantine/hooks';
import { showNotification } from '@mantine/notifications';
@@ -39,65 +40,70 @@ export default function SearchBar(props: any) {
}
return (
<form
onChange={() => {
// If querry contains !yt or !t add "Searching on YouTube" or "Searching torrent"
const querry = form.values.querry.trim();
const isYoutube = querry.startsWith('!yt');
const isTorrent = querry.startsWith('!t');
if (isYoutube) {
setIcon(<BrandYoutube />);
} else if (isTorrent) {
setIcon(<Download />);
} else {
setIcon(<Search />);
}
<Box
style={{
width: '100%',
}}
onSubmit={form.onSubmit((values) => {
// Find if querry is prefixed by !yt or !t
const querry = values.querry.trim();
const isYoutube = querry.startsWith('!yt');
const isTorrent = querry.startsWith('!t');
if (isYoutube) {
window.open(`https://www.youtube.com/results?search_query=${querry.substring(3)}`);
} else if (isTorrent) {
window.open(`https://thepiratebay.org/search.php?q=${querry.substring(3)}`);
} else {
window.open(`${querryUrl}${values.querry}`);
}
})}
>
<Popover
opened={opened}
style={{
width: '100%',
<form
onChange={() => {
// If querry contains !yt or !t add "Searching on YouTube" or "Searching torrent"
const querry = form.values.querry.trim();
const isYoutube = querry.startsWith('!yt');
const isTorrent = querry.startsWith('!t');
if (isYoutube) {
setIcon(<BrandYoutube size={22} />);
} else if (isTorrent) {
setIcon(<Download size={22} />);
} else {
setIcon(<Search size={22} />);
}
}}
position="bottom"
placement="start"
withArrow
trapFocus={false}
transition="pop-top-left"
onFocusCapture={() => setOpened(true)}
onBlurCapture={() => setOpened(false)}
target={
<TextInput
variant="filled"
color="blue"
icon={<Search size={18} />}
radius="md"
rightSection={icon}
size="md"
placeholder="Search the web"
{...props}
{...form.getInputProps('querry')}
/>
}
onSubmit={form.onSubmit((values) => {
// Find if querry is prefixed by !yt or !t
const querry = values.querry.trim();
const isYoutube = querry.startsWith('!yt');
const isTorrent = querry.startsWith('!t');
if (isYoutube) {
window.open(`https://www.youtube.com/results?search_query=${querry.substring(3)}`);
} else if (isTorrent) {
window.open(`https://thepiratebay.org/search.php?q=${querry.substring(3)}`);
} else {
window.open(`${querryUrl}${values.querry}`);
}
})}
>
<Text>
tip: You can prefix your querry with <b>!yt</b> or <b>!t</b> to research on youtube or for
a torrent
</Text>
</Popover>
</form>
<Popover
opened={opened}
style={{
width: '100%',
}}
position="bottom"
placement="start"
withArrow
trapFocus={false}
transition="pop-top-left"
onFocusCapture={() => setOpened(true)}
onBlurCapture={() => setOpened(false)}
target={
<TextInput
variant="filled"
color="blue"
icon={icon}
radius="md"
size="md"
placeholder="Search the web"
{...props}
{...form.getInputProps('querry')}
/>
}
>
<Text>
tip: You can prefix your querry with <b>!yt</b> or <b>!t</b> to research on youtube or
for a torrent
</Text>
</Popover>
</form>
</Box>
);
}