Implement basic save/load (still needs some fixes)

src/Components/MainMenu/MainMenu.tsx

@@ -0,0 +1,74 @@
+import * as React from 'react';
+
+interface IMainMenuProps {
+  newEditor: () => void;
+  loadEditor: (files: FileList | null) => void
+}
+
+enum WindowState {
+  MAIN,
+  LOAD,
+}
+
+export const MainMenu: React.FC<IMainMenuProps> = (props) => {
+  const [windowState, setWindowState] = React.useState(WindowState.MAIN);
+  switch (windowState) {
+    case WindowState.LOAD:
+      return (
+        <div className='flex flex-col drop-shadow-lg bg-blue-50 p-12 rounded-lg absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2'>
+          <form className="flex items-center space-x-6">
+            <label className="block">
+              <span className="sr-only">Choose profile photo</span>
+              <input
+                type="file"
+                accept="application/json"
+                onChange={e => {
+                  props.loadEditor(e.target.files);
+                }}
+                className="block w-full text-sm text-slate-500
+                  file:mr-4 file:py-2 file:px-4
+                  file:rounded-full file:border-0
+                  file:text-sm file:font-semibold
+                  file:transition-all
+                  file:cursor-pointer
+                  file:bg-blue-100 file:text-blue-700
+                  hover:file:bg-blue-200
+              "/>
+            </label>
+          </form>
+          {/* <button
+            onClick={() => setWindowState(WindowState.MAIN)}
+            className='block text-sm
+              mt-8 py-4 px-4
+              rounded-full border-0
+              font-semibold
+              transition-all
+              bg-blue-100 text-blue-700
+              hover:bg-blue-200'
+          >
+            Load
+          </button> */}
+          <button
+            onClick={() => setWindowState(WindowState.MAIN)}
+            className='block text-sm
+              mt-8 py-2 px-4
+              rounded-full border-0
+              font-semibold
+              transition-all
+              bg-blue-100 text-blue-700
+              hover:bg-blue-200'
+          >
+            Go back
+          </button>
+        </div>
+
+      );
+    default:
+      return (
+        <div className='absolute bg-blue-50 p-12 rounded-lg drop-shadow-lg grid grid-cols-1 md:grid-cols-2 gap-8 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2'>
+          <button className='mainmenu-btn' onClick={props.newEditor}>Start from scratch</button>
+          <button className='mainmenu-btn' onClick={() => setWindowState(WindowState.LOAD)}>Load a configuration file</button>
+        </div>
+      );
+  }
+};