menu app

import React from 'react';
import '../scss/test.scss';
import { Typography, Row, Col, Icon, Button } from 'antd';
const { Title } = Typography;

class Test extends React.Component {
  constructor (props) {
    super(props);
    this.data = [
      {
        name: 'HR',
        module: [
          {
            name: 'Human Resource',
            icon: 'user'
          }
        ]
      },
      {
        name: 'Office',
        module: [
          {
            name: 'Human Resource',
            icon: 'user'
          },
          {
            name: 'Human Resource',
            icon: 'user'
          }
        ]
      },
      {
        name: 'Project',
        module: [
          {
            name: 'Human Resource',
            icon: 'user'
          },
          {
            name: 'Human Resource',
            icon: 'user'
          },
          {
            name: 'Human Resource',
            icon: 'user'
          },
          {
            name: 'Human Resource',
            icon: 'user'
          }
        ]
      },
      {
        name: 'Booking',
        module: [
          {
            name: 'Human Resource',
            icon: 'solution'
          },
          {
            name: 'Human Resource',
            icon: 'user'
          },
          {
            name: 'Human Resource',
            icon: 'qq'
          }
        ]
      }
    ];
  }

  showMenu () {
    const size = this.data.length;
    const menu = this.data.map((item, index) => {
      return (
        <Col key={index} order={index} span={24 / size}>
          <div className="divider">
            <Title level={3} style={{ textAlign: 'center' }}>{item.name}</Title>
            {this.showItem(item.module)}
          </div>
        </Col>
      );
    });
    return menu;
  }

  showItem (items) {
    // map throw 2 object in arrays
    return items.map((item, index) => {
      if (index % 2 === 0) {
        return (
          <Row type="flex" justify="center" align="top" gutter={8}>
            {
              !item ? null
                : (<Col style={{ textAlign: 'center', margin: '10px' }}>
                  <Button style={{ height: 100, color: '#2ecc71', width: 100 }}>
                    <Icon type={item.icon} style={{ fontSize: 50 }}/>
                  </Button>
                  <p className="p">{item.name} </p>
                </Col>)
            }
            {
              !items[index + 1] ? null
                : <Col style={{ textAlign: 'center', margin: '10px' }}>
                  <Button style={{ height: 100, color: '#2ecc71', width: 100 }}>
                    <Icon type={items[index + 1].icon} style={{ fontSize: 50 }}/>
                  </Button>
                  <p className="p">{items[index + 1].name} </p>
                </Col>
            }
          </Row>
        );
      }
    });
  }
  render () {
    return (
      <div>
        <h1 className="title">FPT Work</h1>
        <Row type="flex" >
          {this.showMenu()}
        </Row>
      </div>
    );
  }
}

export default Test;


$color : #2ecc71;

.title {
    // {textAlign:"center", backgroundColor:"#2ecc71" , color:"white", padding:"20px"}
    text-align: center;
    background-color: $color;
    color: white;
    padding: 20px;
};

.divider {
    border-right: 0.5px solid $color;
    min-height: 90vh;

}
.p {
    color: $color;
    width: 100%;
}