505813d530
Implement translations with useContext in React +Add events to allow changing the language in the app +Refactor AppEvents +Redesign vertical bars in elements
99 lines
2.9 KiB
TypeScript
99 lines
2.9 KiB
TypeScript
import * as React from 'react';
|
|
import { FAST_BOOT } from '../../utils/default';
|
|
import { Loader } from '../Loader/Loader';
|
|
import { Text } from '../Text/Text';
|
|
|
|
interface IMainMenuProps {
|
|
newEditor: () => void
|
|
loadEditor: (files: FileList | null) => void
|
|
}
|
|
|
|
enum WindowState {
|
|
Main,
|
|
Load,
|
|
Loading,
|
|
}
|
|
|
|
export function MainMenu(props: IMainMenuProps): JSX.Element {
|
|
const [windowState, setWindowState] = React.useState(WindowState.Main);
|
|
|
|
if (FAST_BOOT) {
|
|
props.newEditor();
|
|
return (
|
|
<div className='absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2'>
|
|
<Loader />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
switch (windowState) {
|
|
case WindowState.Load:
|
|
return (
|
|
<div
|
|
className='flex flex-col drop-shadow-lg
|
|
bg-blue-50 p-12 rounded-lg absolute
|
|
h-full sm:h-auto
|
|
w-full sm:w-auto
|
|
sm:top-1/2 sm:left-1/2 sm:-translate-x-1/2 sm:-translate-y-1/2'
|
|
>
|
|
<form className="flex items-center space-x-6">
|
|
<label className="block">
|
|
<span className="sr-only">Import save</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 type="button"
|
|
onClick={() => setWindowState(WindowState.Main)}
|
|
className='normal-btn block
|
|
mt-8 '
|
|
>
|
|
Go back
|
|
</button>
|
|
</div>
|
|
|
|
);
|
|
case WindowState.Loading:
|
|
return (
|
|
<div className='absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2'>
|
|
<Loader />
|
|
</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
|
|
h-full sm:h-auto
|
|
w-full sm:w-auto
|
|
sm:top-1/2 sm:left-1/2 sm:-translate-x-1/2 sm:-translate-y-1/2'>
|
|
<button type="button" className='mainmenu-btn' onClick={() => {
|
|
setWindowState(WindowState.Loading);
|
|
props.newEditor();
|
|
}}>
|
|
{Text({ textId: '@StartFromScratch' })}
|
|
</button>
|
|
<button
|
|
type="button"
|
|
className='mainmenu-btn'
|
|
onClick={() => setWindowState(WindowState.Load)}
|
|
>
|
|
{Text({ textId: '@LoadConfigFile' })}
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|
|
};
|