diff --git a/components/AppShelf/AddAppShelfItem.tsx b/components/AppShelf/AddAppShelfItem.tsx index 122a073fc..1c53b7bfe 100644 --- a/components/AppShelf/AddAppShelfItem.tsx +++ b/components/AppShelf/AddAppShelfItem.tsx @@ -103,30 +103,34 @@ export default function AddItemShelfItem(props: any) { - - - + - - - setOpened(true)} size={60} /> - - Add Service - - - - + theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[1], + }, + }} + > + + + setOpened(true)} size={60} /> + + Add Service + + + ); } diff --git a/components/AppShelf/AppShelf.tsx b/components/AppShelf/AppShelf.tsx index fb0533f17..f1b8ff006 100644 --- a/components/AppShelf/AppShelf.tsx +++ b/components/AppShelf/AppShelf.tsx @@ -10,6 +10,9 @@ import { AspectRatio, createStyles, Center, + Container, + SimpleGrid, + Space, } from '@mantine/core'; import { showNotification } from '@mantine/notifications'; import { AlertCircle, Cross, X } from 'tabler-icons-react'; @@ -24,7 +27,9 @@ const useStyles = createStyles((theme) => ({ backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[1], textAlign: 'center', padding: theme.spacing.xl, - borderRadius: theme.radius.md, + borderRadius: theme.radius.sm, + width: 200, + height: 180, '&:hover': { backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[2], @@ -53,39 +58,42 @@ const AppShelf = (props: any) => { } return ( - - {config.services - ? config.services.map((service, i) => ( - - { - setHovering(service.name); - }} - onHoverEnd={(e) => { - setHovering('none'); - }} - > - - - - - - - - - {service.name} - - - {service.name} - - - + + {config.services.map((service, i) => ( + { + setHovering(service.name); + }} + onHoverEnd={(e) => { + setHovering('none'); + }} + > + + + + {service.name} + + - - )) - : null} - - + + + + + {service.name} + + + + + + ))} + ); }; diff --git a/components/AppShelf/AppShelfMenu.tsx b/components/AppShelf/AppShelfMenu.tsx index a1846397d..1621c5be5 100644 --- a/components/AppShelf/AppShelfMenu.tsx +++ b/components/AppShelf/AppShelfMenu.tsx @@ -5,7 +5,7 @@ import { Check, Edit, Trash } from 'tabler-icons-react'; export default function AppShelfMenu(props: any) { const { name, removeitem: removeItem } = props; return ( - + Settings { - // 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(); - } else if (isTorrent) { - setIcon(); - } else { - setIcon(); - } + { - // 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}`); - } - })} > - { + // 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(); + } else if (isTorrent) { + setIcon(); + } else { + setIcon(); + } }} - position="bottom" - placement="start" - withArrow - trapFocus={false} - transition="pop-top-left" - onFocusCapture={() => setOpened(true)} - onBlurCapture={() => setOpened(false)} - target={ - } - 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}`); + } + })} > - - tip: You can prefix your querry with !yt or !t to research on youtube or for - a torrent - - - + setOpened(true)} + onBlurCapture={() => setOpened(false)} + target={ + + } + > + + tip: You can prefix your querry with !yt or !t to research on youtube or + for a torrent + + + + ); } diff --git a/components/calendar/CalendarComponent.tsx b/components/calendar/CalendarComponent.tsx index 0dc58a871..716cb0879 100644 --- a/components/calendar/CalendarComponent.tsx +++ b/components/calendar/CalendarComponent.tsx @@ -1,4 +1,4 @@ -import { Group, Indicator, Popover, Box, Container, Text, Avatar } from '@mantine/core'; +import { Group, Indicator, Popover, Box, Container, Text, Avatar, ActionIcon } from '@mantine/core'; import { useEffect, useState } from 'react'; import { Calendar } from '@mantine/dates'; import dayjs from 'dayjs'; @@ -27,7 +27,6 @@ export default function CalendarComponent(props: any) { const [opened, setOpened] = useState(false); // const [medias, setMedias] = useState(); const dates = medias.map((media) => media.inCinemas); - const [value, setValue] = useState(null); const parsedDates = dates.map((date) => dayjs(date)); console.log(parsedDates); @@ -64,10 +63,7 @@ export default function CalendarComponent(props: any) { return ( { - setValue(day); - }} + onChange={(day: any) => {}} renderDay={(renderdate) => } /> ); @@ -82,13 +78,13 @@ function DayComponent(props: any) { if (match > -1) { return ( - { setOpened(true); console.log(); }} - radius="xl" color="teal" + variant="light" > } /> - + ); } return
{day}
; diff --git a/pages/index.tsx b/pages/index.tsx index 2f2ab66a6..ce0f1314c 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,5 +1,6 @@ -import { Notification } from '@mantine/core'; +import { Group, Notification } from '@mantine/core'; import AppShelf from '../components/AppShelf/AppShelf'; +import CalendarComponent from '../components/calendar/CalendarComponent'; import LoadConfigComponent from '../components/Config/LoadConfig'; import SearchBar from '../components/SearchBar/SearchBar'; @@ -7,7 +8,10 @@ export default function HomePage() { return ( <> - + + + + );