Fix UI and Add shelf item button

components/AppShelf/AddAppShelfItem.tsx

@@ -17,10 +17,11 @@ import { useForm } from '@mantine/hooks';
 import { motion } from 'framer-motion';
 import { useState } from 'react';
 import { Apps } from 'tabler-icons-react';
+import { useConfig } from '../../tools/state';
 import { ServiceType, ServiceTypeList } from '../../tools/types';
 
 export default function AddItemShelfItem(props: any) {
-  const { additem: addItem } = props;
+  const { config, addService } = useConfig();
   const [opened, setOpened] = useState(false);
   const theme = useMantineTheme();
   const form = useForm({
@@ -53,7 +54,7 @@ export default function AddItemShelfItem(props: any) {
         </Center>
         <form
           onSubmit={form.onSubmit(() => {
-            addItem(form.values);
+            addService(form.values);
             setOpened(false);
             form.reset();
           })}

components/AppShelf/AppShelf.tsx

@@ -93,6 +93,7 @@ const AppShelf = (props: any) => {
           </Box>
         </motion.div>
       ))}
+      <AddItemShelfItem/>
     </SimpleGrid>
   );
 };

components/calendar/CalendarComponent.tsx

@@ -1,4 +1,14 @@
-import { Group, Indicator, Popover, Box, Container, Text, Avatar, ActionIcon } from '@mantine/core';
+import {
+  Group,
+  Indicator,
+  Popover,
+  Box,
+  Container,
+  Text,
+  Avatar,
+  ActionIcon,
+  Center,
+} from '@mantine/core';
 import { useEffect, useState } from 'react';
 import { Calendar } from '@mantine/dates';
 import dayjs from 'dayjs';
@@ -20,7 +30,6 @@ async function GetCalendars(endDate: Date) {
       fetch(`${service.url}/api/v3/calendar?end=${endDate}?apikey=${service.apiKey}`)
     )
   );
-  console.log(Calendars);
 }
 
 export default function CalendarComponent(props: any) {
@@ -28,7 +37,6 @@ export default function CalendarComponent(props: any) {
   // const [medias, setMedias] = useState();
   const dates = medias.map((media) => media.inCinemas);
   const parsedDates = dates.map((date) => dayjs(date));
-  console.log(parsedDates);
 
   // useEffect(() => {
   //   const { services } = props;
@@ -78,23 +86,25 @@ function DayComponent(props: any) {
 
   if (match > -1) {
     return (
-      <ActionIcon
+      <Box
         onClick={() => {
           setOpened(true);
-          console.log();
         }}
-        color="teal"
+        style={{ height: '100%', width: '100%' }}
-        variant="light"
       >
-        <Popover
+        <Center>
-          position="right"
+          <Indicator size={10} color="red">
-          width={700}
+            <Popover
-          onClose={() => setOpened(false)}
+              position="left"
-          opened={opened}
+              width={700}
-          target={day}
+              onClose={() => setOpened(false)}
-          children={<MediaDisplay media={medias[match]} />}
+              opened={opened}
-        />
+              target={day}
-      </ActionIcon>
+              children={<MediaDisplay media={medias[match]} />}
+            />
+          </Indicator>
+        </Center>
+      </Box>
     );
   }
   return <div>{day}</div>;

components/layout/Layout.tsx

@@ -1,6 +1,7 @@
-import { AppShell, Center, createStyles } from '@mantine/core';
+import { AppShell, Aside, Center, createStyles } from '@mantine/core';
 import { Header } from './Header';
 import { Footer } from './Footer';
+import CalendarComponent from '../calendar/CalendarComponent';
 
 const useStyles = createStyles((theme) => ({
   main: {
@@ -13,10 +14,27 @@ const useStyles = createStyles((theme) => ({
 export default function Layout({ children, style }: any) {
   const { classes, cx } = useStyles();
   return (
-    <AppShell header={<Header links={[]} />} footer={<Footer links={[]} />}>
+    <AppShell
+      
+      aside={
+        <Aside
+        height={'auto'}
+        width={{
+          xs: 'auto',
+          md: 'auto',
+          lg: 'auto',
+          xl: 'auto',
+        }}
+        >
+          <CalendarComponent />
+        </Aside>
+      }
+      header={<Header links={[]} />}
+      footer={<Footer links={[]} />}
+    >
       <Center>
         <main
-          className={cx(classes.main)}
+          // className={cx(classes.main)}
           style={{
             ...style,
           }}

pages/index.tsx

@@ -8,7 +8,7 @@ export default function HomePage() {
   return (
     <>
       <SearchBar />
-      <Group align={"start"} position="apart" noWrap>
+      <Group align={'start'} position="apart" noWrap>
         <AppShelf />
         <CalendarComponent />
       </Group>