mirror of https://github.com/mue/mue.git
64 lines
1.8 KiB
JavaScript
64 lines
1.8 KiB
JavaScript
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('./tabs/Settings'));
|
|
const Addons = lazy(() => import('./tabs/Addons'));
|
|
const Marketplace = lazy(() => import('./tabs/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>
|
|
);
|
|
}
|
|
|
|
export default memo(MainModal);
|