import React from 'react';
import PropTypes from 'prop-types';
import InteriorDesignItemComponent from './InteriorDesignItemComponent';
class InteriorDesignComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
limit: 10,
};
this.expand = this.expand.bind(this);
}
componentDidMount() {
if (window.innerWidth < 576) {
this.setState({ limit: 2 });
}
}
expand(e) {
e.preventDefault();
this.setState({ limit: 10 });
}
render() {
const { interiorDesignData } = this.props;
const { limit } = this.state;
let seeMoreInteriorDesigns;
if (limit < 5) {
seeMoreInteriorDesigns = <a className="btn btn-primary see-all" onClick={this.expand}>See More</a>;
} else {
seeMoreInteriorDesigns = <a href="http://yoursite.comy/projects" className="btn btn-primary see-all">See All</a>;
}
return (
<div className="front-listing-component">
<div className="container-fluid-no-mobile-gutter">
<div className="mx-auto listing-component">
{
interiorDesignData.interiordesign.slice(0, limit).map(index => (
<InteriorDesignItemComponent key={index.link} interiorDesignItemData={index} />
))
}
<div className="row">
<div className="col text-center">
{seeMoreInteriorDesigns}
</div>
</div>
</div>
</div>
</div>
);
}
}
InteriorDesignComponent.defaultProps = {
interiorDesignData: {},
};
InteriorDesignComponent.propTypes = {
interiorDesignData: PropTypes.object,
};
export default InteriorDesignComponent;