<commit_before>import React from 'react';
import Row from 'Row';
import Col from 'Col';
import ReactPlayground from './ReactPlayground';
import PropTable from './PropTable';
import Samples from './Samples';
import iconLinksNavbar from '../../../examples/IconLinksNavbar';
import leftAlignedNavbar from '../../../examples/LeftAlignedNavbar';
import rightAlignedNavbar from '../../../examples/RightAlignedNavbar';
import Code from '!raw-loader!Navbar';

const NavbarPage = () => (
  <Row>
    <Col m={9} s={12} l={10}>
      <p className='caption'>
        The navbar is fully contained by an HTML5 Nav tag. Inside a recommended container div, there are 2 main parts of the navbar. A logo or brand link, and the navigations links. You can align these links to the left or right.
      </p>
      <h4 className='col s12'>
        Right Aligned Links
      </h4>
      <Col s={12}>
        <ReactPlayground code={Samples.rightAlignedNavbar}>
          { rightAlignedNavbar }
        </ReactPlayground>
      </Col>

      <h4 className='col s12'>
        Left Aligned Links
      </h4>
      <Col s={12}>
        <ReactPlayground code={Samples.leftAlignedNavbar}>
          { leftAlignedNavbar }
        </ReactPlayground>
      </Col>
      <h4 className='col s12'>
        Icon Links
      </h4>
      <Col s={12}>
        <ReactPlayground code={Samples.iconLinksNavbar}>
          { iconLinksNavbar }
        </ReactPlayground>
      </Col>

      <Col s={12}>
        <PropTable header='Navbar' component={Code} />
      </Col>
    </Col>
  </Row>
);

export default NavbarPage;<commit_msg>Clean up navbar page structure (#357)<commit_after>import React from 'react';
import Row from 'Row';
import Col from 'Col';
import Section from 'Section';
import ReactPlayground from './ReactPlayground';
import PropTable from './PropTable';
import NavbarCode from '!raw-loader!Navbar';
import NavItemCode from '!raw-loader!NavItem';

const header = 'Navbar';
const desc = `The navbar is fully contained by an HTML5 Nav tag.
  Inside a recommended container div, there are 2 main parts of the
  navbar. A logo or brand link, and the navigations links. You can
  align these links to the left or right.`;

const NavbarPage = () => (
  <Row>
    <Col s={12} l={10}>
      <Section>
        <Row>
          <p className='caption'>{desc}</p>
          <h4 className='col s12'>Right Aligned Links</h4>
        </Row>
        <ReactPlayground code={require('!raw-loader!../../../examples/RightAlignedNavbar.js')} />
      </Section>

      <Section>
        <Row>
          <h4 className='col s12'>Left Aligned Links</h4>
        </Row>
        <ReactPlayground code={require('!raw-loader!../../../examples/LeftAlignedNavbar.js')} />
      </Section>

      <Section>
        <Row>
          <h4 className='col s12'>Icon Links</h4>
        </Row>
        <ReactPlayground code={require('!raw-loader!../../../examples/IconLinksNavbar.js')} />
      </Section>

      <Section>
        <PropTable header={header} component={NavbarCode} />
        <PropTable header='NavItem' component={NavItemCode} />
      </Section>
    </Col>
  </Row>
);

export default NavbarPage;
{'fraction_non_alphanumeric': 0.14285714285714285, 'fraction_numerical': 0.015238095238095238, 'mean_word_length': 2.68107476635514, 'pattern_counts': {'":': 0, '<': 61, '<?xml version=': 0, '>': 63, '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': '2617516', 'n_tokens_mistral': 979, 'n_tokens_neox': 948, 'n_words': 280}