refactor: Move main modal to components

Co-authored-by: David Ralph <me@davidcralph.co.uk>

src/components/Elements/MainModal/Main.jsx

@@ -0,0 +1,64 @@
+import variables from 'config/variables';
+import { Suspense, lazy, useState, memo } from 'react';
+import { MdClose } from 'react-icons/md';
+
+import './scss/index.scss';
+import { Tooltip } from 'components/Elements';
+const Settings = lazy(() => import('../../../features/misc/views/Settings'));
+const Addons = lazy(() => import('../../../features/misc/views/Addons'));
+const Marketplace = lazy(() => import('../../../features/misc/views/Marketplace'));
+
+const renderLoader = () => (
+  <div style={{ display: 'flex', width: '100%', minHeight: '100%' }}>
+    <div className="modalSidebar">
+      <span className="mainTitle">Mue</span>
+    </div>
+    <div className="modalTabContent">
+      <div className="emptyItems">
+        <div className="emptyMessage">
+          <div className="loaderHolder">
+            <div id="loader"></div>
+            <span className="subtitle">{variables.getMessage('modals.main.loading')}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+);
+
+function MainModal({ modalClose }) {
+  const [currentTab, setCurrentTab] = useState('settings');
+
+  const changeTab = (type) => {
+    setCurrentTab(type);
+  };
+
+  const renderTab = () => {
+    switch (currentTab) {
+      case 'addons':
+        return <Addons changeTab={changeTab} />;
+      case 'marketplace':
+        return <Marketplace changeTab={changeTab} />;
+      default:
+        return <Settings changeTab={changeTab} />;
+    }
+  };
+
+  return (
+    <div className="frame">
+      <Tooltip
+        style={{ position: 'absolute', top: '1rem', right: '1rem' }}
+        title={variables.getMessage('modals.welcome.buttons.close')}
+        key="closeTooltip"
+      >
+        <span className="closeModal" onClick={modalClose}>
+          <MdClose />
+        </span>
+      </Tooltip>
+      <Suspense fallback={renderLoader()}>{renderTab()}</Suspense>
+    </div>
+  );
+}
+
+const MemoizedMainModal = memo(MainModal);
+export { MemoizedMainModal as default, MemoizedMainModal as MainModal };