content: import React from 'react';
  import { Link } from 'react-router-dom';
  
  import '../../style/module/comic.card.css';
  
  export default class ComicCard extends React.Component {
    static defaultProps = {
      topicIcon: require('../../static/section/ice-cream.svg'),
    }
  
    componentDidMount() {
      const { content } = this;
      const covers = content.querySelectorAll('.cover');
  
      for (const c of covers) {
        c.style.height = `${c.clientWidth / 2.414}px`;
      }
    }
  
    renderList = (list) => {
      return list.map((comic) => {
        const coverStyle = {
          backgroundImage: `url(${comic.thumbnail})`,
        };
        return (
          <Link className="pure-u-1-1 comic-card" to={`/comic/${comic.id}`} key={comic.title}>
            <div className="cover" style={coverStyle} />
            <div className="content">
              <h1>{comic.title}</h1>
            </div>
          </Link>
        );
      });
    }
  
    render() {
      const { comicList, topicTitle, topicIcon } = this.props;
  
      return (
        <section className="section">
          <div className="header">
            <h2>
              <img className="topic-icon" src={topicIcon} alt={topicTitle} />
              {topicTitle}
            </h2>
            <a className="more" href="/" >
              <i className="fa fa-angle-right" />
            </a>
          </div>
          <div className="pure-g" ref={(c) => { this.content = c; }}>
            {this.renderList(comicList)}
          </div>
        </section>
      );
    }
  }
  