fork from bc4552c5a8

client/components/Breadcrumb/Breadcrumb.js

@@ -0,0 +1,42 @@
+import './Breadcrumb.scss';
+import { withRouter } from 'react-router-dom';
+import { Breadcrumb } from 'antd';
+import PropTypes from 'prop-types';
+import React, { PureComponent as Component } from 'react';
+import { connect } from 'react-redux';
+import { Link } from 'react-router-dom';
+
+@connect(state => {
+  return {
+    breadcrumb: state.user.breadcrumb
+  };
+})
+@withRouter
+export default class BreadcrumbNavigation extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+  static propTypes = {
+    breadcrumb: PropTypes.array
+  };
+
+  render() {
+    const getItem = this.props.breadcrumb.map((item, index) => {
+      if (item.href) {
+        return (
+          <Breadcrumb.Item key={index}>
+            <Link to={item.href}>{item.name}</Link>
+          </Breadcrumb.Item>
+        );
+      } else {
+        return <Breadcrumb.Item key={index}>{item.name}</Breadcrumb.Item>;
+      }
+    });
+    return (
+      <div className="breadcrumb-container">
+        <Breadcrumb>{getItem}</Breadcrumb>
+      </div>
+    );
+  }
+}

client/components/Breadcrumb/Breadcrumb.scss

@@ -0,0 +1,26 @@
+@import '../../styles/mixin.scss';
+
+.breadcrumb-container {
+  .ant-breadcrumb {
+    font-size: 16px;
+    float: left;
+    color: #fff;
+    padding-left: 16px;
+    line-height: unset;
+  
+  }
+  .ant-breadcrumb a {
+    color: #fff;
+    &:hover {
+      color: $color-blue
+    }
+  }
+  .ant-breadcrumb > span:last-child {
+    color: #fff;
+    font-weight: normal;
+  }
+  .ant-breadcrumb-separator {
+    color: #fff;
+    font-weight: normal;
+  }
+}