{"size": 1255, "ext": "js", "max_stars_repo_path": "packages/client/src/components/Sidebar/Trending/TrendingItem.js", "max_stars_repo_name": "Jaren831/Tartarus", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "packages/client/src/components/Sidebar/Trending/TrendingItem.js", "max_issues_repo_name": "Jaren831/Tartarus", "max_issues_repo_issues_event_min_datetime": "2021-05-11T08:47:51.000Z", "max_issues_repo_issues_event_max_datetime": "2022-01-22T11:18:46.000Z", "max_forks_repo_path": "packages/client/src/components/Sidebar/Trending/TrendingItem.js", "max_forks_repo_name": "JarenL/Tartarus", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": 3, "max_forks_count": null, "avg_line_length": 22.8181818182, "max_line_length": 65, "alphanum_fraction": 0.6278884462}
import React from 'react';
import { wideFont } from '../../shared/helpers';
import { overflow } from '../../shared/helpers';
import styled from 'styled-components/macro';
import { Link } from 'react-router-dom';
import TrendingIcon from './TrendingIcon';

const TrendingWrapper = styled.div`
  ${wideFont};
  ${overflow};
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  color: ${props => props.theme.mutedText};
`;

const Item = styled(Link)`
  font-size: 12px;
  text-decoration: none;
  width: 100%;
  display: flex;
  align-items: center;
  color: ${props => props.theme.mutedText};
  ::after {
    left: -1px;
    top: 0;
    bottom: 0;
    border-left: 3px solid ${props => props.theme.accent};
  }
  &:hover {
    color: ${props => props.theme.accent};
    & > svg {
      color: ${props => props.theme.accent} !important;
    }
  }
`;

const ButtonWrapper = styled.div`
  align-self: flex-end;
`;

const TrendingItem = props => {
  return (
    <TrendingWrapper>
      <Item to={`/f/${props.forumName}`}>{props.forumName}</Item>
      <ButtonWrapper>
        <TrendingIcon size={14} />
        {`${props.forumWeight}%`}
      </ButtonWrapper>
    </TrendingWrapper>
  );
};

export default TrendingItem;