d9e06537e8
This improve greatly the performance and the code cleaning. It allows us to separate the inseparable class methods into modules functions
62 lines
2.1 KiB
TypeScript
62 lines
2.1 KiB
TypeScript
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-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>
|
|
);
|
|
}
|
|
};
|