import React, {Component} from 'react';
import { Layout } from '@douyinfe/semi-ui';
type Props = {};

type State = {
    redirect: string | null,
    username: string,
    password: string,
    loading: boolean,
    message: string
};
export default class Test extends Component<Props, State> {

    render() {

        console.log('124234');

        const onbreakpoint = (screen, bool) => {
            console.log(screen, bool);
        };
        const commonStyle = {
            height: 64,
            lineHeight: '64px',
            background: 'var(--semi-color-fill-0)'
        };
        const { Header, Footer, Sider, Content } = Layout;
        return (
            <Layout className="components-layout-demo">
                <Header style={commonStyle}>Header</Header>
                <Layout>
                    <Sider
                        style={{ width: '120px', background: 'var(--semi-color-fill-2)' }}
                        breakpoint={['md']}
                        onBreakpoint={onbreakpoint}
                    >
                        Sider
                    </Sider>
                    <Content style={{ height: 300, lineHeight: '300px' }}>Content</Content>
                </Layout>
                <Footer style={commonStyle}>Footer</Footer>
            </Layout>
        );
    }
}