import React from 'react';
import PropTypes from 'prop-types';
class ControlsMenuTabSection extends React.Component {
render() {
const content = this.props.content.map((chunk, i) => {
return (
<li key={i}>
<a
href={chunk.link}
onClick={chunk.onClick ? e => {
e.preventDefault();
e.stopPropagation();
chunk.onClick();
} : () => {}}
>
<i className={`menu-icon fa ${chunk.icon} ${chunk.theme}`} />
<div className="menu-info">
<h4 className="control-sidebar-subheading">{chunk.heading}</h4>
<p>{chunk.description}</p>
{chunk.markup || ''}
</div>
</a>
</li>
);
});
return (
<div>
<h3 className="control-sidebar-heading">{this.props.heading}</h3>
<ul className="control-sidebar-menu">
{content}
{this.props.children}
</ul>
</div>
);
}
}
ControlsMenuTabSection.propTypes = {
heading: PropTypes.string,
content: PropTypes.array
};
ControlsMenuTabSection.defaultProps = {
heading: '',
content: []
};
export default ControlsMenuTabSection;
|