<commit_before>import React from 'react'
import SectionLayout from '../SectionLayout'
import LiveEdit from '../LiveEdit'

const sample = (`
// Create a Title component that'll render an <h1> tag with some styles
const Title = styled.h1\`
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
\`;

// Create a Wrapper component that'll render a <section> tag with some styles
const Wrapper = styled.section\`
  padding: 4em;
  background: papayawhip;
\`;

// Use Title and Wrapper like any other React component – except they're styled!
render(
  <Wrapper>
    <Title>Hello World, this is my first styled component!</Title>
  </Wrapper>
);
`).trim()

const GettingStarted = ({ url }) => (
  <SectionLayout title="Getting Started">
    <p>
      Styled Components is utilising tagged template literals to style your components.
    </p>

    <p>
      It removes the mapping between components and styles, which means that when you're defining your styles,
      you're actually creating a normal React component, that has your styles attached to it.
    </p>

    <p><commit_msg>Fix a nit<commit_after>import React from 'react'
import SectionLayout from '../SectionLayout'
import LiveEdit from '../LiveEdit'

const sample = (`
// Create a Title component that'll render an <h1> tag with some styles
const Title = styled.h1\`
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
\`;

// Create a Wrapper component that'll render a <section> tag with some styles
const Wrapper = styled.section\`
  padding: 4em;
  background: papayawhip;
\`;

// Use Title and Wrapper like any other React component – except they're styled!
render(
  <Wrapper>
    <Title>
      Hello World, this is my first styled component!
    </Title>
  </Wrapper>
);
`).trim()

const GettingStarted = ({ url }) => (
  <SectionLayout title="Getting Started">
    <p>
      Styled Components is utilising tagged template literals to style your components.
    </p>

    <p>
      It removes the mapping between components and styles, which means that when you're defining your styles,
      you're actually creating a normal React component, that has your styles attached to it.
    </p>

    <p>
{'fraction_non_alphanumeric': 0.10237659963436929, 'fraction_numerical': 0.004570383912248629, 'mean_word_length': 3.476482617586912, 'pattern_counts': {'":': 0, '<': 27, '<?xml version=': 0, '>': 29, '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': '3935473', 'n_tokens_mistral': 654, 'n_tokens_neox': 625, 'n_words': 265}