<commit_before>import { Component } from 'react';
import format from 'date-fns/format';

const trans = {
  'Monday': 'Man',
  'Tuesday': 'Tirs',
  'Wednesday': 'Ons',
  'Thursday': 'Tors',
  'Friday': 'Fre',
  'Saturday': 'Lør',
  'Sunday': 'Søn'
};

const Circle = ({
  children,
  size = 50,
  style,
  selected,
  ...props
}) => (
  <button className="root selected" style={{
    width: size,
    height: size,
    borderRadius: size / 2,
    ...style
  }} {...props}>
    {children}

    <style jsx>{`
      .root {
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 600;
        color: rgba(255, 255, 255, .4);
        transition: transform .1s, color .2s;
        font-size: 22px;
        border: 0;
        outline: none;
        cursor: pointer;
        background: #b11b11;
      }

      .root:hover {
        color: rgba(255, 255, 255, 1);
      }
    `}
    </style>
  </button>
);

class Day extends Component {
  state = {
    selectedIndex: 0
  };

  render() {
    const { day, events } = this.props;

    const date = events[0].startsAt;

    return (
      <div className="day">
        <div className="date">
          <h2 className="title">{trans[day]}</h2>
          <span style={{ color: '#b11b11' }}>{format(date, 'DD.MM')}</span>
        </div>

        <div className="right">
          <div className="row">
            {events.map((event, index) => {
              const hour = format(event.startsAt, 'H');
              const selected = index === this.state.selectedIndex;
              return (
                <Circle
                  key={index}
                  onClick={() => this.setState({ selectedIndex: index })}
                  size={40}
                  style={{
                    transform: `translateX(${hour/24 * 700}px) scale(${selected ? 1.5 : 1})`
                  }}
                >
                  {hour}
                </Circle>
              );
            })}
          </div><commit_msg>offset timeline<commit_after>import { Component } from 'react';
import format from 'date-fns/format';

const trans = {
  'Monday': 'Man',
  'Tuesday': 'Tirs',
  'Wednesday': 'Ons',
  'Thursday': 'Tors',
  'Friday': 'Fre',
  'Saturday': 'Lør',
  'Sunday': 'Søn'
};

const Circle = ({
  children,
  size = 50,
  style,
  selected,
  ...props
}) => (
  <button className="root selected" style={{
    width: size,
    height: size,
    borderRadius: size / 2,
    ...style
  }} {...props}>
    {children}

    <style jsx>{`
      .root {
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 600;
        color: rgba(255, 255, 255, .4);
        transition: transform .1s, color .2s;
        font-size: 22px;
        border: 0;
        outline: none;
        cursor: pointer;
        background: #b11b11;
      }

      .root:hover {
        color: rgba(255, 255, 255, 1);
      }
    `}
    </style>
  </button>
);

class Day extends Component {
  state = {
    selectedIndex: 0
  };

  render() {
    const { day, events } = this.props;

    const date = events[0].startsAt;

    return (
      <div className="day">
        <div className="date">
          <h2 className="title">{trans[day]}</h2>
          <span style={{ color: '#b11b11' }}>{format(date, 'DD.MM')}</span>
        </div>

        <div className="right">
          <div className="row">
            {events.map((event, index) => {
              const hour = format(event.startsAt, 'H');
              const selected = index === this.state.selectedIndex;
              return (
                <Circle
                  key={index}
                  onClick={() => this.setState({ selectedIndex: index })}
                  size={40}
                  style={{
                    transform: `translateX(${(hour-8)/24 * 700}px) scale(${selected ? 1.5 : 1})`
                  }}
                >
                  {hour}
                </Circle>
              );
            })}
          </div>
{'fraction_non_alphanumeric': 0.16251866600298656, 'fraction_numerical': 0.026630164260826282, 'mean_word_length': 1.6182410423452769, 'pattern_counts': {'":': 0, '<': 35, '<?xml version=': 0, '>': 41, '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': '4907482', 'n_tokens_mistral': 1364, 'n_tokens_neox': 1238, 'n_words': 292}