🏗️ 💥 Change the whole folder structure.

Now using src as a subfolder to the source files

src/components/Config/ConfigChanger.tsx

@@ -0,0 +1,37 @@
+import { Center, Loader, Select, Tooltip } from '@mantine/core';
+import { setCookies } from 'cookies-next';
+import { useEffect, useState } from 'react';
+import { useConfig } from '../../tools/state';
+
+export default function ConfigChanger() {
+  const { config, loadConfig, setConfig, getConfigs } = useConfig();
+  const [configList, setConfigList] = useState([] as string[]);
+  useEffect(() => {
+    getConfigs().then((configs) => setConfigList(configs));
+    // setConfig(initialConfig);
+  }, [config]);
+  // If configlist is empty, return a loading indicator
+  if (configList.length === 0) {
+    return (
+      <Center>
+        <Tooltip label={"Loading your configs. This doesn't load in vercel."}>
+          <Loader />
+        </Tooltip>
+      </Center>
+    );
+  }
+  return (
+    <Select
+      defaultValue={config.name}
+      label="Config loader"
+      onChange={(e) => {
+        loadConfig(e ?? 'default');
+        setCookies('config-name', e ?? 'default', { maxAge: 60 * 60 * 24 * 30 });
+      }}
+      data={
+        // If config list is empty, return the current config
+        configList.length === 0 ? [config.name] : configList
+      }
+    />
+  );
+}

src/components/Config/LoadConfig.tsx

@@ -0,0 +1,95 @@
+import { Group, Text, useMantineTheme, MantineTheme } from '@mantine/core';
+import { Upload, Photo, X, Icon as TablerIcon, Check } from 'tabler-icons-react';
+import { DropzoneStatus, FullScreenDropzone } from '@mantine/dropzone';
+import { showNotification } from '@mantine/notifications';
+import { useRef } from 'react';
+import { useRouter } from 'next/router';
+import { setCookies } from 'cookies-next';
+import { useConfig } from '../../tools/state';
+import { Config } from '../../tools/types';
+
+function getIconColor(status: DropzoneStatus, theme: MantineTheme) {
+  return status.accepted
+    ? theme.colors[theme.primaryColor][theme.colorScheme === 'dark' ? 4 : 6]
+    : status.rejected
+    ? theme.colors.red[theme.colorScheme === 'dark' ? 4 : 6]
+    : theme.colorScheme === 'dark'
+    ? theme.colors.dark[0]
+    : theme.colors.gray[7];
+}
+
+function ImageUploadIcon({
+  status,
+  ...props
+}: React.ComponentProps<TablerIcon> & { status: DropzoneStatus }) {
+  if (status.accepted) {
+    return <Upload {...props} />;
+  }
+
+  if (status.rejected) {
+    return <X {...props} />;
+  }
+
+  return <Photo {...props} />;
+}
+
+export const dropzoneChildren = (status: DropzoneStatus, theme: MantineTheme) => (
+  <Group position="center" spacing="xl" style={{ minHeight: 220, pointerEvents: 'none' }}>
+    <ImageUploadIcon status={status} style={{ color: getIconColor(status, theme) }} size={80} />
+
+    <div>
+      <Text size="xl" inline>
+        Drag images here or click to select files
+      </Text>
+      <Text size="sm" color="dimmed" inline mt={7}>
+        Attach as many files as you like, each file should not exceed 5mb
+      </Text>
+    </div>
+  </Group>
+);
+
+export default function LoadConfigComponent(props: any) {
+  const { setConfig } = useConfig();
+  const theme = useMantineTheme();
+  const router = useRouter();
+  const openRef = useRef<() => void>();
+
+  return (
+    <FullScreenDropzone
+      onDrop={(files) => {
+        files[0].text().then((e) => {
+          try {
+            JSON.parse(e) as Config;
+          } catch (e) {
+            showNotification({
+              autoClose: 5000,
+              title: <Text>Error</Text>,
+              color: 'red',
+              icon: <X />,
+              message: 'could not load your config. Invalid JSON format.',
+            });
+            return;
+          }
+          const newConfig: Config = JSON.parse(e);
+          showNotification({
+            autoClose: 5000,
+            radius: 'md',
+            title: (
+              <Text>
+                Config <b>{newConfig.name}</b> loaded successfully
+              </Text>
+            ),
+            color: 'green',
+            icon: <Check />,
+            message: undefined,
+          });
+          setCookies('config-name', newConfig.name, { maxAge: 60 * 60 * 24 * 30 });
+          setConfig(newConfig);
+        });
+      }}
+      accept={['application/json']}
+    >
+      {(status) => dropzoneChildren(status, theme)}
+    </FullScreenDropzone>
+  );
+}

src/components/Config/SaveConfig.tsx

@@ -0,0 +1,18 @@
+import { Button } from '@mantine/core';
+import fileDownload from 'js-file-download';
+import { Download } from 'tabler-icons-react';
+import { useConfig } from '../../tools/state';
+
+export default function SaveConfigComponent(props: any) {
+  const { config } = useConfig();
+  function onClick(e: any) {
+    if (config) {
+      fileDownload(JSON.stringify(config, null, '\t'), `${config.name}.json`);
+    }
+  }
+  return (
+    <Button leftIcon={<Download />} variant="outline" onClick={onClick}>
+      Download your config
+    </Button>
+  );
+}

src/components/Config/SelectConfig.tsx

@@ -0,0 +1,16 @@
+import { Select } from '@mantine/core';
+import { useState } from 'react';
+
+export default function SelectConfig(props: any) {
+  const [value, setValue] = useState<string | null>('');
+  return (
+    <Select
+      value={value}
+      onChange={setValue}
+      data={[
+        { value: 'default', label: 'Default' },
+        { value: 'yourmom', label: 'Your mom' },
+      ]}
+    />
+  );
+}