Rework appshell and include calendar to the main page

components/AppShelf/AddAppShelfItem.tsx

@@ -103,8 +103,13 @@ export default function AddItemShelfItem(props: any) {
           </Group>
         </form>
       </Modal>
-      <Grid.Col span={4} lg={2} sm={3}>
-        <AspectRatio ratio={4 / 3}>
+      <AspectRatio
+        style={{
+          minHeight: 120,
+          minWidth: 120,
+        }}
+        ratio={4 / 3}
+      >
         <Box
           sx={{
             backgroundColor:
@@ -126,7 +131,6 @@ export default function AddItemShelfItem(props: any) {
           </Group>
         </Box>
       </AspectRatio>
-      </Grid.Col>
     </>
   );
 }

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,10 +58,8 @@ const AppShelf = (props: any) => {
   }
 
   return (
-    <Grid m="xl" gutter="xl">
-      {config.services
-        ? config.services.map((service, i) => (
-            <Grid.Col lg={2} sm={3} key={i}>
+    <SimpleGrid m="xl" cols={4} spacing="xl">
+      {config.services.map((service, i) => (
         <motion.div
           onHoverStart={(e) => {
             setHovering(service.name);
@@ -65,27 +68,32 @@ const AppShelf = (props: any) => {
             setHovering('none');
           }}
         >
-                <AspectRatio ratio={4 / 3}>
           <Box className={classes.main}>
+            <Group position="center">
+              <Space />
+              <Text>{service.name}</Text>
               <motion.div animate={{ opacity: hovering == service.name ? 1 : 0 }}>
                 <AppShelfMenu removeitem={removeService} name={service.name} />
               </motion.div>
+            </Group>
             <Group direction="column" position="center">
               <Anchor href={service.url} target="_blank">
                 <motion.div whileHover={{ scale: 1.2 }}>
-                          <Image style={{ maxWidth: 60 }} src={service.icon} alt={service.name} />
+                  <Image
+                    style={{
+                      maxWidth: 100,
+                    }}
+                    fit="cover"
+                    src={service.icon}
+                    alt={service.name}
+                  />
                 </motion.div>
               </Anchor>
-                      <Text>{service.name}</Text>
             </Group>
           </Box>
-                </AspectRatio>
         </motion.div>
-            </Grid.Col>
-          ))
-        : null}
-      <AddItemShelfItem additem={addService} />
-    </Grid>
+      ))}
+    </SimpleGrid>
   );
 };
 

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 (
-    <Menu sx={{ position: 'absolute', top: 3, right: 3 }}>
+    <Menu position='right'>
       <Menu.Label>Settings</Menu.Label>
       <Menu.Item
         color="primary"

components/SearchBar/SearchBar.tsx

@@ -6,6 +6,7 @@ import {
   useMantineTheme,
   Center,
   Popover,
+  Box,
 } from '@mantine/core';
 import { useForm } from '@mantine/hooks';
 import { showNotification } from '@mantine/notifications';
@@ -39,6 +40,11 @@ export default function SearchBar(props: any) {
   }
 
   return (
+    <Box
+      style={{
+        width: '100%',
+      }}
+    >
       <form
         onChange={() => {
           // If querry contains !yt or !t add "Searching on YouTube" or "Searching torrent"
@@ -46,11 +52,11 @@ export default function SearchBar(props: any) {
           const isYoutube = querry.startsWith('!yt');
           const isTorrent = querry.startsWith('!t');
           if (isYoutube) {
-          setIcon(<BrandYoutube />);
+            setIcon(<BrandYoutube size={22} />);
           } else if (isTorrent) {
-          setIcon(<Download />);
+            setIcon(<Download size={22} />);
           } else {
-          setIcon(<Search />);
+            setIcon(<Search size={22} />);
           }
         }}
         onSubmit={form.onSubmit((values) => {
@@ -83,9 +89,8 @@ export default function SearchBar(props: any) {
             <TextInput
               variant="filled"
               color="blue"
-            icon={<Search size={18} />}
+              icon={icon}
               radius="md"
-            rightSection={icon}
               size="md"
               placeholder="Search the web"
               {...props}
@@ -94,10 +99,11 @@ export default function SearchBar(props: any) {
           }
         >
           <Text>
-          tip: You can prefix your querry with <b>!yt</b> or <b>!t</b> to research on youtube or for
-          a torrent
+            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>
   );
 }

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 (
     <Calendar
-      value={value}
-      onChange={(day: any) => {
-        setValue(day);
-      }}
+      onChange={(day: any) => {}}
       renderDay={(renderdate) => <DayComponent renderdate={renderdate} parsedDates={parsedDates} />}
     />
   );
@@ -82,13 +78,13 @@ function DayComponent(props: any) {
 
   if (match > -1) {
     return (
-      <Avatar
+      <ActionIcon
         onClick={() => {
           setOpened(true);
           console.log();
         }}
-        radius="xl"
         color="teal"
+        variant="light"
       >
         <Popover
           position="right"
@@ -98,7 +94,7 @@ function DayComponent(props: any) {
           target={day}
           children={<MediaDisplay media={medias[match]} />}
         />
-      </Avatar>
+      </ActionIcon>
     );
   }
   return <div>{day}</div>;

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 (
     <>
       <SearchBar />
+      <Group align={"start"} position="apart" noWrap>
         <AppShelf />
+        <CalendarComponent />
+      </Group>
       <LoadConfigComponent />
     </>
   );