🚧 Work in progress for Mantine v5

src/components/Config/ConfigChanger.tsx

@@ -5,25 +5,27 @@ import { useConfig } from '../../tools/state';
 
 export default function ConfigChanger() {
   const { config, loadConfig, setConfig, getConfigs } = useConfig();
-  const [configList, setConfigList] = useState([] as string[]);
+  const [configList, setConfigList] = useState<string[]>([]);
+  const [value, setValue] = useState(config.name);
   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."}>
+      <Tooltip label={"Loading your configs. This doesn't load in vercel."}>
+        <Center>
           <Loader />
-        </Tooltip>
-      </Center>
+        </Center>
+      </Tooltip>
     );
   }
+  // return <Select data={[{ value: '1', label: '1' },]} onChange={(e) => console.log(e)} value="1" />;
   return (
     <Select
-      defaultValue={config.name}
       label="Config loader"
+      value={value}
+      defaultValue={config.name}
       onChange={(e) => {
         loadConfig(e ?? 'default');
         setCookie('config-name', e ?? 'default', {

src/components/Config/LoadConfig.tsx

@@ -6,11 +6,11 @@ import {
   IconCheck as Check,
   TablerIcon,
 } from '@tabler/icons';
-import { DropzoneStatus, FullScreenDropzone } from '@mantine/dropzone';
 import { showNotification } from '@mantine/notifications';
 import { useRef } from 'react';
 import { useRouter } from 'next/router';
 import { setCookie } from 'cookies-next';
+import { Dropzone } from '@mantine/dropzone';
 import { useConfig } from '../../tools/state';
 import { Config } from '../../tools/types';
 import { migrateToIdConfig } from '../../tools/migrate';
@@ -62,7 +62,7 @@ export default function LoadConfigComponent(props: any) {
   const openRef = useRef<() => void>();
 
   return (
-    <FullScreenDropzone
+    <Dropzone.FullScreen
       onDrop={(files) => {
         files[0].text().then((e) => {
           try {
@@ -100,7 +100,7 @@ export default function LoadConfigComponent(props: any) {
       }}
       accept={['application/json']}
     >
-      {(status) => dropzoneChildren(status, theme)}
-    </FullScreenDropzone>
+      {(status: any) => dropzoneChildren(status, theme)}
+    </Dropzone.FullScreen>
   );
 }