<commit_before>import * as React from "react";
import { NavLink } from "react-router-dom";
import styled from "styled-components";
import { Project } from "tracky-types";
import { primary } from "core/colors";
import { paths } from "core/router";
import { replaceParams } from "core/utils";
import Icon from "components/shared/kit/Icon";
import Title from "../Title";

export default ({ items, activeId, onAdd }: Props) =>
  <div>
    <Title>
      <TitleWrap>
        Projects<Circle onClick={() => onAdd()} />
      </TitleWrap>
    </Title>
    {items.map(({ name, id }, i: number) =>
      <Project key={i} to={replaceParams(paths.PROJECT, { id })}>
        {name}
      </Project>
    )}
  </div>;
export type Props = {
  items: Project[];
  onAdd: Function;
  activeId?: Project["id"];
};

const TitleWrap = styled.div`
  display: flex;
  align-items: center;
`;

const Circle = styled(Icon).attrs({ name: "add_circle_outline" })`
  margin-left: auto;
  cursor: pointer;
  font-size: 12px;
`;

const Project = styled(NavLink)`
  padding: 6px 14px;
  font-size: 14px;
  cursor: pointer;
  display: block;
  text-decoration: none;
  color: #000;
  &:hover {
    background-color: #f5f5f5;
  }
  &.active {
    background-color: ${primary};
    color: #fff;
  }
`;
type ProjectProps = {
  isActive?: boolean;
};
<commit_msg>Fix project view<commit_after>import * as React from "react";
import { NavLink } from "react-router-dom";
import styled from "styled-components";
import { Project } from "tracky-types";
import { border, primary } from "core/colors";
import { paths } from "core/router";
import { replaceParams } from "core/utils";
import Icon from "components/shared/kit/Icon";
import Title from "../Title";

export default ({ items, activeId, onAdd }: Props) =>
  <div>
    <Title>
      <TitleWrap>
        Projects<Circle onClick={() => onAdd()} />
      </TitleWrap>
    </Title>
    {items.map(({ name, id }, i: number) =>
      <Project key={i} to={replaceParams(paths.PROJECT, { id })}>
        {name}
      </Project>
    )}
  </div>;
export type Props = {
  items: Project[];
  onAdd: Function;
  activeId?: Project["id"];
};

const TitleWrap = styled.div`
  display: flex;
  align-items: center;
`;

const Circle = styled(Icon).attrs({ name: "add_circle_outline" })`
  margin-left: auto;
  cursor: pointer;
  font-size: 12px;
`;

const Project = styled(NavLink)`
  padding: 6px 14px;
  font-size: 14px;
  cursor: pointer;
  display: block;
  text-decoration: none;
  color: #000;
  margin-right: -1px;
  &:hover {
    background-color: #f5f5f5;
    border-right: 1px solid ${border};
  }
  &.active {
    background-color: ${primary};
    color: #fff;
  }
`;
type ProjectProps = {
  isActive?: boolean;
};

{'fraction_non_alphanumeric': 0.1669112252384446, 'fraction_numerical': 0.010271460014673514, 'mean_word_length': 3.405492730210016, 'pattern_counts': {'":': 0, '<': 21, '<?xml version=': 0, '>': 27, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3311276', 'n_tokens_mistral': 956, 'n_tokens_neox': 938, 'n_words': 245}