{"size": 868, "ext": "js", "max_stars_repo_path": "src/components/explore/popularfavorite/PopularFavoriteList.js", "max_stars_repo_name": "cugliubingyi/ZhiHu", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/components/explore/popularfavorite/PopularFavoriteList.js", "max_issues_repo_name": "cugliubingyi/ZhiHu", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/components/explore/popularfavorite/PopularFavoriteList.js", "max_forks_repo_name": "cugliubingyi/ZhiHu", "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.1111111111, "max_line_length": 79, "alphanum_fraction": 0.7108294931}
import React from "react";
import { useSelector } from "react-redux";
import styled from "styled-components";

import PopularFavoriteItem from "./PopularFavoriteItem";

const PopularFavoriteListWrapper = styled.div`
  display: flex;
  flex-wrap: wrap;
  width: 1080px;
  justify-content: space-between;
`;

const PopularFavoriteList = (props) => {
  const popularFavoriteList = useSelector(
    (state) => state.explores.popularFavoriteList
  );

  let outputList = null;

  if (popularFavoriteList.length) {
    outputList = popularFavoriteList.map((popularFavoriteItem) => {
      return (
        <PopularFavoriteItem
          key={popularFavoriteItem.title}
          popularFavoriteItem={popularFavoriteItem}
        />
      );
    });
  }

  return <PopularFavoriteListWrapper>{outputList}</PopularFavoriteListWrapper>;
};

export default PopularFavoriteList;
