{"size": 1289, "ext": "js", "max_stars_repo_path": "frontend/src/components/categories/Categories.js", "max_stars_repo_name": "nek0senpa1/labs11_social_boardFE", "max_stars_repo_stars_event_min_datetime": "2019-02-15T15:52:17.000Z", "max_stars_repo_stars_event_max_datetime": "2020-01-10T19:56:45.000Z", "max_issues_repo_path": "frontend/src/components/categories/Categories.js", "max_issues_repo_name": "nek0senpa1/labs11_social_boardFE", "max_issues_repo_issues_event_min_datetime": "2019-02-14T19:39:37.000Z", "max_issues_repo_issues_event_max_datetime": "2021-10-05T20:21:16.000Z", "max_forks_repo_path": "frontend/src/components/categories/Categories.js", "max_forks_repo_name": "nek0senpa1/labs11_social_boardFE", "max_forks_repo_forks_event_min_datetime": "2019-04-07T12:01:15.000Z", "max_forks_repo_forks_event_max_datetime": "2019-04-07T12:01:15.000Z"}
{"max_stars_count": 3, "max_issues_count": 21, "max_forks_count": 1, "avg_line_length": 31.4390243902, "max_line_length": 100, "alphanum_fraction": 0.3204034135}
import React from 'react';
import styled from 'styled-components';

import { Category } from '../index.js'

/***************************************************************************************************
 ********************************************** Styles *********************************************
 **************************************************************************************************/
const DivCategories = styled.div`
  display: flex;
  flex-direction: column;
  width: 100%;
`;

const DivCategoryRows = styled.div`
  display: flex;
  flex-direction: column;
  width: 100%;
`;

/***************************************************************************************************
 ********************************************* Component *******************************************
 **************************************************************************************************/
const Categories = ({ categories, history }) => {
  return (
    <DivCategories>
      <DivCategoryRows>
        {
          categories.map((category, index) =>
            <Category
              key={index}
              category={category}
              history={history}
            />)
        }
      </DivCategoryRows>
    </DivCategories>
  );
}

export default Categories;