<commit_before>const html = require('choo/html');
const dependencyStatus = require('./util/dependency-status');

function componentStatus(component) {
  const status = dependencyStatus(component);
  switch (status) {
    case 'latest':
      return html`<span class="johnny-depp__component-status is-latest">${status}</span>`;
    case 'major-update':
      return html`<span class="johnny-depp__component-status is-major">${status}</span>`;
    case 'minor-update':
      return html`<span class="johnny-depp__component-status is-minor">${status}</span>`;
    case 'patch-update':
      return html`<span class="johnny-depp__component-status is-patch">${status}</span>`;
    default:
      return html`<span></span>`;
  }
}

function componentList(components, activeComponent, emit) {
  const componentsItems = components.map((component, index) => {
    const className = 'johnny-depp__list-item' + (activeComponent === index ? ' is-active' : '');
    return html`
      <li class="${className}" onclick="${changeComponent}">
        ${component.name}
        ${componentStatus(component)}
      </li>
    `;
  });

  return html`
    <div class="johnny-depp__list-container">
      <img class="johnny-depp__logo" src="/static/img/jd_logo.png"/>
      <h1 class="johnny-depp__title">Components</h1>
      <ul class="johnny-depp__list">
        ${componentsItems}
      </ul>
    </div>
  `;

  function changeComponent(component) {
    emit('changeComponent', component);
  }
}

module.exports = componentList;<commit_msg>change components<commit_after>const html = require('choo/html');
const dependencyStatus = require('./util/dependency-status');

function componentStatus(component) {
  const status = dependencyStatus(component);
  switch (status) {
    case 'latest':
      return html`<span class="johnny-depp__component-status is-latest">${status}</span>`;
    case 'major-update':
      return html`<span class="johnny-depp__component-status is-major">${status}</span>`;
    case 'minor-update':
      return html`<span class="johnny-depp__component-status is-minor">${status}</span>`;
    case 'patch-update':
      return html`<span class="johnny-depp__component-status is-patch">${status}</span>`;
    default:
      return html`<span></span>`;
  }
}

function componentList(components, activeComponent, emit) {
  const componentsItems = components.map((component, index) => {
    const className = 'johnny-depp__list-item' + (activeComponent === index ? ' is-active' : '');

    return html`
      <li class="${className}" onclick="${changeComponent(index)}">
        ${component.name}
        ${componentStatus(component)}
      </li>
    `;
  });

  return html`
    <div class="johnny-depp__list-container">
      <img class="johnny-depp__logo" src="/static/img/jd_logo.png"/>
      <h1 class="johnny-depp__title">Components</h1>
      <ul class="johnny-depp__list">
        ${componentsItems}
      </ul>
    </div>
  `;

  function changeComponent(index) {
    return function () {
      emit('changeComponent', index);
    };
  }
}

module.exports = componentList;
{'fraction_non_alphanumeric': 0.16504539559014267, 'fraction_numerical': 0.0012970168612191958, 'mean_word_length': 3.865930599369085, 'pattern_counts': {'":': 0, '<': 41, '<?xml version=': 0, '>': 43, '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': '6938241', 'n_tokens_mistral': 970, 'n_tokens_neox': 929, 'n_words': 166}