import {Layout, Skeleton} from 'antd';
import {CSSProperties, FC} from 'react';

const style: CSSProperties = {
  width: '100%', height: '100%', display: 'block',
};

const HomeSkeleton: FC = function() {
  return (
    <Layout className='container' style={{padding: '16px'}}>
      <Layout.Header style={{background: 'transparent', padding: '0'}}>
        <Skeleton.Input
          rootClassName='height-full'
          style={{height: '100%', marginTop: '5px'}}
          block
          active
        />
      </Layout.Header>

      <Layout style={{marginTop: '20px'}}>
        <Layout.Sider style={{background: 'transparent'}}>
          <Skeleton.Input
            block
            active
            style={style}
            rootClassName='height-full'
          />
        </Layout.Sider>

        <Layout.Content style={{marginLeft: '20px'}}>
          <Skeleton active />
          <Skeleton active style={{marginTop: '20px'}} />
          <Skeleton active style={{marginTop: '20px'}} />
          <Skeleton active style={{marginTop: '20px'}} />
        </Layout.Content>
      </Layout>
    </Layout>
  );
};

export default HomeSkeleton;
