Widgets.js

import React from 'react';
import { Row, Col } from 'antd';
import LayoutWrapper from '@imd/components/utility/layoutWrapper';
import basicStyle from '@imd/assets/styles/constants';
import IsoWidgetsWrapper from '@imd/containers/Widgets/WidgetsWrapper';
import CardWidget from '@imd/containers/Widgets/Card/CardWidget';

const styles = {
  wisgetPageStyle: {
    display: 'flex',
    flexFlow: 'row wrap',
    alignItems: 'flex-start',
    overflow: 'hidden',
  },
};

export default function() {
  const { rowStyle, colStyle } = basicStyle;
  
  return (
    <LayoutWrapper style={{height: "100%"}}>
      <div style={styles.wisgetPageStyle}>
        <p>
        <h1>Welcome to Interpret My Data</h1><br></br>
        Which data would you like to have interpreted?
        </p>
        <Row style={rowStyle} gutter={0} justify="start">
          <Col span={6} style={colStyle}>
              <IsoWidgetsWrapper>
                {/* Card Widget */}
                <a href='/dashboard/facebook'>
                <CardWidget
                  icon="ion-social-facebook"
                  iconcolor="#3b5998"
                  text="Facebook"
                />
                </a>
              </IsoWidgetsWrapper>
          </Col>
          <Col span={6} style={colStyle}>
              <IsoWidgetsWrapper>
                {/* Card Widget */}
                <a href='/dashboard/instagram'>
                <CardWidget
                  icon="ion-social-instagram"
                  iconcolor="#833ab4"
                  text="Instagram"
                />
                </a>
              </IsoWidgetsWrapper>
          </Col>
          <Col span={6} style={colStyle}>
              <IsoWidgetsWrapper>
                {/* Card Widget */}
                <a href='/dashboard/spotify'>
                <CardWidget
                  icon="ion-music-note"
                  iconcolor="#1db954"
                  text="Spotify"
                />
                </a>
              </IsoWidgetsWrapper>
          </Col>
          <Col span={6} style={colStyle}>
              <IsoWidgetsWrapper>
                {/* Card Widget */}
                <a href='/dashboard/linkedin'>
                <CardWidget
                  icon="ion-social-linkedin"
                  iconcolor="#0e76a8"
                  text="LinkedIn"
                />
                </a>
              </IsoWidgetsWrapper>
          </Col>
        </Row>
      </div>
    </LayoutWrapper>
  );
}