<commit_before>import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';

import getSrsRankName from 'common/utils/getSrsRankName';
import StreakIcon from 'common/components/StreakIcon';

import { gutter } from 'common/styles/layout';
import H5 from 'common/components/H5';

const Wrapper = styled.div`
  display: inline-flex;
  align-items: center;
  ${gutter({ type: 'outer', position: 'right' })}
`;
const Text = H5.extend`
`;

StreakStatus.propTypes = {
  streak: PropTypes.number.isRequired,
  category: PropTypes.string.isRequired,
};

function StreakStatus({ streak, category }) {
  return (
    <Wrapper>
      <Text>{category}: </Text>
      <StreakIcon streakName={getSrsRankName(streak)} />
    </Wrapper>
  );
}


export default StreakStatus;
<commit_msg>feat: use srs colors in vocab detail streak icons<commit_after>import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';

import getSrsRankName from 'common/utils/getSrsRankName';
import StreakIcon from 'common/components/StreakIcon';
import { SRS_COLORS } from 'common/styles/colors';
import { gutter } from 'common/styles/layout';
import H5 from 'common/components/H5';

const Wrapper = styled.div`
  display: inline-flex;
  align-items: center;
  ${gutter({ type: 'outer', position: 'right' })};
`;
const Text = H5.extend``;

StreakStatus.propTypes = {
  streak: PropTypes.number.isRequired,
  category: PropTypes.string.isRequired,
};

function StreakStatus({ streak, category }) {
  const name = getSrsRankName(streak);
  return (
    <Wrapper>
      <Text>{category}: </Text>
      <StreakIcon streakName={name} color={SRS_COLORS[name]} />
    </Wrapper>
  );
}

export default StreakStatus;

{'fraction_non_alphanumeric': 0.1356125356125356, 'fraction_numerical': 0.003418803418803419, 'mean_word_length': 4.795379537953796, 'pattern_counts': {'":': 0, '<': 13, '<?xml version=': 0, '>': 13, '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': '5825499', 'n_tokens_mistral': 561, 'n_tokens_neox': 573, 'n_words': 140}