✨ Add a proceudally generated options manager

This allows for options in settings generated based on their name in module config. Very important change 🧙‍

src/components/modules/date/DateModule.tsx

@@ -2,6 +2,7 @@ import { Group, Text, Title } from '@mantine/core';
 import dayjs from 'dayjs';
 import { useEffect, useState } from 'react';
 import { Clock } from 'tabler-icons-react';
+import { useConfig } from '../../../tools/state';
 import { IModule } from '../modules';
 
 export const DateModule: IModule = {
@@ -9,33 +10,39 @@ export const DateModule: IModule = {
   description: 'Show the current time and date in a card',
   icon: Clock,
   component: DateComponent,
+  options: {
+    full: {
+      name: 'Display full time (24-hour)',
+      value: true,
+    },
+  },
 };
 
 export default function DateComponent(props: any) {
   const [date, setDate] = useState(new Date());
+  const { config } = useConfig();
   const hours = date.getHours();
   const minutes = date.getMinutes();
-
+  const fullSetting = config.settings[`${DateModule.title}.full`];
   // Change date on minute change
   // Note: Using 10 000ms instead of 1000ms to chill a little :)
   useEffect(() => {
     setInterval(() => {
       setDate(new Date());
-    }, 10000);
+    }, 1000 * 60);
   }, []);
 
+  const timeString = `${hours < 10 ? `0${hours}` : hours}:${
+    minutes < 10 ? `0${minutes}` : minutes
+  }`;
+  const halfTimeString = `${hours < 10 ? `${hours % 12}` : hours % 12}:${
+    minutes < 10 ? `0${minutes}` : minutes
+  } ${hours < 12 ? 'AM' : 'PM'}`;
+  const finalTimeString = fullSetting ? timeString : halfTimeString;
   return (
     <Group p="sm" direction="column">
-      <Title>
-        {hours < 10 ? `0${hours}` : hours}:{minutes < 10 ? `0${minutes}` : minutes}
-      </Title>
-      <Text size="xl">
-        {
-          // Use dayjs to format the date
-          // https://day.js.org/en/getting-started/installation/
-          dayjs(date).format('dddd, MMMM D')
-        }
-      </Text>
+      <Title>{finalTimeString}</Title>
+      <Text size="xl">{dayjs(date).format('dddd, MMMM D')}</Text>
     </Group>
   );
 }

src/components/modules/moduleWrapper.tsx

@@ -1,19 +1,82 @@
-import { Card, useMantineTheme } from '@mantine/core';
+import { Card, Menu, Switch, useMantineTheme } from '@mantine/core';
 import { useConfig } from '../../tools/state';
 import { IModule } from './modules';
 
 export default function ModuleWrapper(props: any) {
   const { module }: { module: IModule } = props;
-  const { config } = useConfig();
+  const { config, setConfig } = useConfig();
   const enabledModules = config.settings.enabledModules ?? [];
   // Remove 'Module' from enabled modules titles
   const isShown = enabledModules.includes(module.title);
   const theme = useMantineTheme();
+  const items: JSX.Element[] = [];
+  if (module.options) {
+    const keys = Object.keys(module.options);
+    const values = Object.values(module.options);
+    // Get the value and the name of the option
+    const types = values.map((v) => typeof v.value);
+    // Loop over all the types with a for each loop
+    types.forEach((type, index) => {
+      const optionName = `${module.title}.${keys[index]}`;
+      // TODO: Add support for other types
+      if (type === 'boolean') {
+        items.push(
+          <Switch
+            defaultChecked={
+              // Set default checked to the value of the option if it exists
+              config.settings[optionName] ??
+              (module.options && module.options[keys[index]].value) ??
+              false
+            }
+            defaultValue={config.settings[optionName] ?? false}
+            key={keys[index]}
+            onClick={(e) => {
+              setConfig({
+                ...config,
+                settings: {
+                  ...config.settings,
+                  enabledModules: [...config.settings.enabledModules],
+                  [optionName]: e.currentTarget.checked,
+                },
+              });
+            }}
+            label={values[index].name}
+          />
+        );
+      }
+    });
+  }
+  // Sussy baka
   if (!isShown) {
     return null;
   }
   return (
     <Card hidden={!isShown} mx="sm" withBorder radius="lg" shadow="sm">
+      {module.options && (
+        <Menu
+          size="md"
+          shadow="xl"
+          closeOnItemClick={false}
+          radius="md"
+          position="left"
+          styles={{
+            root: {
+              position: 'absolute',
+              top: 15,
+              right: 15,
+            },
+            body: {
+              backgroundColor:
+                theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[1],
+            },
+          }}
+        >
+          <Menu.Label>Settings</Menu.Label>
+          {items.map((item) => (
+            <Menu.Item key={item.key}>{item}</Menu.Item>
+          ))}
+        </Menu>
+      )}
       <module.component />
     </Card>
   );

src/components/modules/modules.tsx

@@ -7,5 +7,14 @@ export interface IModule {
   description: string;
   icon: React.ReactNode;
   component: React.ComponentType;
-  props?: any;
+  options?: Option;
+}
+
+interface Option {
+  [x: string]: OptionValues;
+}
+
+interface OptionValues {
+  name: string;
+  value: boolean;
 }