import * as React from 'react';
import JqxSplitter from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxsplitter';

function App() {
    return (
        <JqxSplitter
            theme="material-purple"
            // @ts-ignore
            width={850}
            height={850}
            panels={[{ size: '50%' }, { size: '50%' }]}
            orientation="vertical"
        >
            <div>
                <JqxSplitter
                    theme="material-purple"
                    style={{ border: 'none' }}
                    width="100%"
                    height="100%"
                    panels={[{ size: '50%' }, { size: '50%' }]}
                    orientation="horizontal"
                >
                    <div>
                        West - North
                    </div>
                    <div>
                        West - South
                    </div>
                </JqxSplitter>
            </div>
            <div>
                <JqxSplitter
                    theme="material-purple"
                    style={{ border: 'none' }}
                    width="100%"
                    height="100%"
                    panels={[{ size: '50%' }, { size: '50%' }]}
                    orientation="horizontal"
                >
                    <div>
                        East - North
                    </div>
                    <div>
                        East - South
                    </div>
                </JqxSplitter>
            </div>
        </JqxSplitter>
    );
}

export default App;