<commit_before>'use babel'

import React from 'react'
import PropTypes from 'prop-types'
import dayjs from 'dayjs'

const AudioItem = ({ data, onCopy }) => {
  const handleCopy = (e) => {
    const type = e.target.innerHTML.toLowerCase().replace(/\s\w/, s => s.trim().toUpperCase())
    const contents = {
      id: data.id,
      name: data.description,
      code: `Audio(id=${data.id}):${data.description}`,
      trCode: `TR(id=${data.id}):${data.description}`
    }

    onCopy(contents[type] || '')
  }

  return (
    <div className="search-item audio">
      <p>{data.createdAt && dayjs(data.createdAt).format('YYYY-MM-DD HH:mm')}</p>
      <p>{data.id}</p>
      <p>{data.description}</p>
      <div className="search-item-audio">
        <audio src={data.url} controls></audio>
        <div className="search-item-buttons">
          <p>Copy:</p>
          <span onClick={handleCopy}>TR Code</span>
          <span onClick={handleCopy}>Code</span>
          <span onClick={handleCopy}>Name</span>
          <span onClick={handleCopy}>ID</span>
        </div>
      </div>
    </div>
  )
}

AudioItem.propTypes = {
  data: PropTypes.shape({
    url: PropTypes.string,
    id: PropTypes.string.isRequired,
    description: PropTypes.string,
    filename: PropTypes.string,
  }).isRequired,
  onCopy: PropTypes.func.isRequired,
}

export default AudioItem
<commit_msg>feat: (#132)<commit_after>'use babel';

import React from 'react';
import PropTypes from 'prop-types';
import dayjs from 'dayjs';

const AudioItem = ({ data, onCopy }) => {
  const handleCopy = e => {
    const type = e.target.innerHTML
      .toLowerCase()
      .replace(/\s\w/, s => s.trim().toUpperCase());
    const contents = {
      id: data.id,
      name: data.description,
      code: `Audio(id=${data.id}):${data.description}`,
      trCode: `TR(id=${data.id}):${data.description}`
    };

    onCopy(contents[type] || '');
  };

  return (
    <div className='search-item audio'>
      <p>
        {data.createdAt && dayjs(data.createdAt).format('YYYY-MM-DD HH:mm')}
      </p>
      <p>{data.id}</p>
      <p>{data.description}</p>
      <p>{data.source}</p>
      <div className='search-item-audio'>
        <audio src={data.url} controls />
        <div className='search-item-buttons'>
          <p>Copy:</p>
          <span onClick={handleCopy}>TR Code</span>
          <span onClick={handleCopy}>Code</span>
          <span onClick={handleCopy}>Name</span>
          <span onClick={handleCopy}>ID</span>
        </div>
      </div>
    </div>
  );
};

AudioItem.propTypes = {
  data: PropTypes.shape({
    url: PropTypes.string,
    id: PropTypes.string.isRequired,
    description: PropTypes.string,
    filename: PropTypes.string
  }).isRequired,
  onCopy: PropTypes.func.isRequired
};

export default AudioItem;

{'fraction_non_alphanumeric': 0.1794871794871795, 'fraction_numerical': 0.0010683760683760685, 'mean_word_length': 2.826975476839237, 'pattern_counts': {'":': 0, '<': 52, '<?xml version=': 0, '>': 58, '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': '6516228', 'n_tokens_mistral': 914, 'n_tokens_neox': 924, 'n_words': 172}