<commit_before>import React, { Component } from 'react';
import { Row, Col, Jumbotron } from 'react-bootstrap';
import { Link } from 'react-router-dom';
import { connect } from 'react-redux';
import GithubCorner from '../../lib/GithubCorner';

class Home extends Component {
  render() {
    return (
      <div>
        <Jumbotron className="text-center">
          <h1 className="title">
            react-github-corner
            <br />
            <small>Add a Github banner to your project page.</small>
          </h1>
          <p>
            View the examples below or learn more by visiting the about page
            after clicking the button below:
          </p>
          <p>
            <Link to={'/react-github-corner/about'} className="btn btn-primary">
              About Page
            </Link>
          </p>
        </Jumbotron>
        <h1 className="title text-center">Examples</h1>
        {[
          ['#fff', '#151513', '#fff', 'right'],
          ['#fff', '#64CEAA', '#fff', 'right'],
          ['#fff', '#FD6C6C', '#fff', 'right'],
          ['#fff', '#70B7FD', '#fff', 'right'],
          ['#000', '#fff', '#000', 'right'],
          ['#000', '#64CEAA', '#fff', 'right'],
          ['#000', '#FD6C6C', '#fff', 'right'],
          ['#000', '#70B7FD', '#fff', 'right'],
          ['#fff', '#151513', '#fff', 'left'],
          ['#fff', '#64CEAA', '#fff', 'left'],
          ['#fff', '#FD6C6C', '#fff', 'left'],
          ['#fff', '#70B7FD', '#fff', 'left'],
          ['#000', '#fff', '#000', 'left'],
          ['#000', '#64CEAA', '#fff', 'left'],
          ['#000', '#FD6C6C', '#fff', 'left'],
          ['#000', '#70B7FD', '#fff', 'left']
        ].map((obj, i) => {
          const [backgroundColor, bannerColor, octoColor, direction] = obj;
          const height = 200;
          return (
            <Row
              key={i}
              style={{
                margin: 20,
                padding: 20,
                backgroundColor: '#f8f8f8',
                border: '2px solid #aaa',
                borderRadius: 20
              }}
            >
              <Col
                mdOffset={3}
                md={3}
                style={{
                  display: 'relative',
                  height: height,
                  background: backgroundColor
                }}
              >
                <GithubCorner
                  href=""
                  bannerColor={bannerColor}
                  octoColor={octoColor}
                  size={80}
                  direction={direction}
                />
              </Col>
              <Col md={3}>
                <pre style={{ width: '100%', height: height }}>
                  {`<GithubCorner
  href={customHref}
  bannerColor="${bannerColor}"
  octoColor="${octoColor}"
  size={80}
  direction="${direction}"
/>`}
                </pre>
              </Col>
            </Row>
          );
        })}
      </div>
    );
  }
}

export default connect()(Home);<commit_msg>Add example with custom `style` prop<commit_after>import React, { Component } from 'react';
import { Row, Col, Jumbotron } from 'react-bootstrap';
import { Link } from 'react-router-dom';
import { connect } from 'react-redux';
import GithubCorner from '../../lib/GithubCorner';

class Home extends Component {
  render() {
    return (
      <div>
        <Jumbotron className="text-center">
          <h1 className="title">
            react-github-corner
            <br />
            <small>Add a Github banner to your project page.</small>
          </h1>
          <p>
            View the examples below or learn more by visiting the about page
            after clicking the button below:
          </p>
          <p>
            <Link to={'/react-github-corner/about'} className="btn btn-primary">
              About Page
            </Link>
          </p>
        </Jumbotron>
        <h1 className="title text-center">Examples</h1>
        {[
          ['#fff', '#151513', '#fff', 'right'],
          ['#fff', '#64CEAA', '#fff', 'right'],
          ['#fff', '#FD6C6C', '#fff', 'right'],
          ['#fff', '#70B7FD', '#fff', 'right'],
          ['#000', '#fff', '#000', 'right'],
          ['#000', '#64CEAA', '#fff', 'right'],
          ['#000', '#FD6C6C', '#fff', 'right'],
          ['#000', '#70B7FD', '#fff', 'right'],
          ['#fff', '#151513', '#fff', 'left'],
          ['#fff', '#64CEAA', '#fff', 'left'],
          ['#fff', '#FD6C6C', '#fff', 'left'],
          ['#fff', '#70B7FD', '#fff', 'left'],
          ['#000', '#fff', '#000', 'left'],
          ['#000', '#64CEAA', '#fff', 'left'],
          ['#000', '#FD6C6C', '#fff', 'left'],
          ['#000', '#70B7FD', '#fff', 'left'],
          ['linear-gradient(to right, orange, blue, violet)', '#000', '#fff', 'left', { mixBlendMode: 'darken'}]
        ].map((obj, i) => {
          const [backgroundColor, bannerColor, octoColor, direction, customStyle] = obj;
          const height = 200;
          return (
            <Row
              key={i}
              style={{
                margin: 20,
                padding: 20,
                background: '#f8f8f8',
                border: '2px solid #aaa',
                borderRadius: 20
              }}
            >
              <Col
                mdOffset={3}
                md={3}
                style={{
                  display: 'relative',
                  height: height,
                  background: backgroundColor
                }}
              >
                <GithubCorner
                  href=""
                  bannerColor={bannerColor}
                  octoColor={octoColor}
                  size={80}
                  direction={direction}
                  style={customStyle}
                />
              </Col>
              <Col md={3}>
                <pre style={{ width: '100%', height: height }}>
                  {`<GithubCorner
  href={customHref}
  bannerColor="${bannerColor}"
  octoColor="${octoColor}"
  size={80}
  direction="${direction}"
  ${customStyle ? `style={${JSON.stringify(customStyle)}}` : ''}
/>`}
                </pre>
              </Col>
            </Row>
          );
        })}
      </div>
    );
  }
}

export default connect()(Home);
{'fraction_non_alphanumeric': 0.1832158872517617, 'fraction_numerical': 0.03155028827674568, 'mean_word_length': 1.4781746031746033, 'pattern_counts': {'":': 0, '<': 57, '<?xml version=': 0, '>': 59, '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': '4081619', 'n_tokens_mistral': 1945, 'n_tokens_neox': 1793, 'n_words': 430}