{"size": 1485, "ext": "js", "max_stars_repo_path": "src/UI/component/Playlist.js", "max_stars_repo_name": "edevars/sprotify", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/UI/component/Playlist.js", "max_issues_repo_name": "edevars/sprotify", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/UI/component/Playlist.js", "max_forks_repo_name": "edevars/sprotify", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 24.75, "max_line_length": 74, "alphanum_fraction": 0.4956228956}
import React, { Component } from "react";
import styled from "styled-components";
import MediaItem from "../component/MediaItem";
import { Link } from "../../../routes";
import slug from "./../../../helpers/slug";

// *! STYLES
const MainGrid = styled.div`
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  grid-gap: 20px;
`;

const styleLink = {
  textDecoration: "none",
  color: "black"
};

class Playlist extends Component {
  render() {
    const { clips, onClickPodcast } = this.props;
    
    return (
      <MainGrid>
        {clips.map(audio => {
          let src = audio.urls.post_image;
          if (src == undefined) {
            src = audio.channel.urls.logo_image.original;
          } else {
            src = audio.urls.post_image.original;
          }
          return (
            <Link
              key={audio.id}
              route="clip"
              params={{
                slugChannel: slug(audio.channel.title),
                idChannel: audio.channel.id,
                slug: slug(audio.title),
                id: audio.id
              }}
            >
              <a
                style={styleLink}
                href=''
                onClick={()=>onClickPodcast(event,audio)}
              >
                <MediaItem key={audio.id} title={audio.title} src={src} />
              </a>
            </Link>
          );
        })}
      </MainGrid>
    );
  }
}

export default Playlist;
