<commit_before>import React, { Fragment, useEffect } from "react";
import PropTypes from "prop-types";
import { Block, InlineBlock } from "jsxstyle";
import { Link, Route, Redirect, Switch } from "react-router-dom";

import { LIGHT_GRAY, RED } from "../Theme";
import EnvironmentHeader from "./EnvironmentHeader";
import Example from "./Example";
import Guide from "./Guide";
import API from "./API";

function EnvironmentLarge({ data, match }) {
  useEffect(() => {
    data.examples.forEach(example => {
      // native doesn't have `load`
      if (example.load) example.load(() => {});
      // all have `loadSource`
      if (example.loadSource) example.loadSource(() => {});
    });
  }, [data]);

  return (
    <Fragment>
      <Nav data={data} environment={match.params.environment} />
      <Content data={data} match={match} />
    </Fragment>
  );
}

EnvironmentLarge.propTypes = {
  data: PropTypes.object,
  match: PropTypes.object
};

function Title(props) {
  return (
    <Block
      textTransform="uppercase"
      fontWeight="bold"
      color={LIGHT_GRAY}
      marginTop="20px"
      {...props}
    />
  );
}

function Triangle({ color }) {
  return (
    <InlineBlock
      position="absolute"
      right="-10px"
      width="0"
      height="0"
      borderTop="10px solid transparent"
      borderBottom="10px solid transparent"
      borderRight={`10px solid ${color}`}
    />
  );
}

Triangle.propTypes = { color: PropTypes.string };

function NavLink({ children, to, color, triangleColor }) {
  return (
    <Route
      path={to}
      children={({ match }) => (
        <Block
          component={Link}
          hoverTextDecoration="underline"
          color={match ? RED : color}
          position="relative"
          props={{ to }}
        >
          {children}
          {match && <Triangle color={triangleColor} />}
        </Block>
      )}
    />
  );
}

NavLink.propTypes = {
  children: PropTypes.string,
  to: PropTypes.string,
  color: PropTypes.string,
  triangleColor: PropTypes.string
};

function NavLinks({ data, environment }) {
  return (
    <Block lineHeight="1.8" padding="10px">
      {Array.isArray(data.examples) && data.examples.length > 0 && (
        <Block>
          <Title>Examples</Title>
          <Block paddingLeft="10px">
            {data.examples.map((item, i) => (
              <NavLink
                key={i}
                to={`/${environment}/example/${item.slug}`}
                triangleColor="rgb(45, 45, 45)"
                children={item.label}
              />
            ))}
          </Block>
        </Block>
      )}

      <Title>Guides</Title>
      <Block paddingLeft="10px">
        {data.guides &&
          data.guides.map((item, i) => (
            <NavLink
              key={i}
              to={`/${environment}/guides/${item.title.slug}`}
              triangleColor="white"
              children={item.title.text}
            />
          ))}
      </Block>
<commit_msg>Add announcements section to website<commit_after>import React, { Fragment, useEffect } from "react";
import PropTypes from "prop-types";
import { Block, InlineBlock } from "jsxstyle";
import { Link, Route, Redirect, Switch } from "react-router-dom";

import { LIGHT_GRAY, RED } from "../Theme";
import EnvironmentHeader from "./EnvironmentHeader";
import Example from "./Example";
import Guide from "./Guide";
import API from "./API";

function EnvironmentLarge({ data, match }) {
  useEffect(
    () => {
      data.examples.forEach(example => {
        // native doesn't have `load`
        if (example.load) example.load(() => {});
        // all have `loadSource`
        if (example.loadSource) example.loadSource(() => {});
      });
    },
    [data]
  );

  return (
    <Fragment>
      <Nav data={data} environment={match.params.environment} />
      <Content data={data} match={match} />
    </Fragment>
  );
}

EnvironmentLarge.propTypes = {
  data: PropTypes.object,
  match: PropTypes.object
};

function Title(props) {
  return (
    <Block
      textTransform="uppercase"
      fontWeight="bold"
      color={LIGHT_GRAY}
      marginTop="20px"
      {...props}
    />
  );
}

function Triangle({ color }) {
  return (
    <InlineBlock
      position="absolute"
      right="-10px"
      width="0"
      height="0"
      borderTop="10px solid transparent"
      borderBottom="10px solid transparent"
      borderRight={`10px solid ${color}`}
    />
  );
}

Triangle.propTypes = { color: PropTypes.string };

function NavLink({ children, to, color, triangleColor }) {
  return (
    <Route
      path={to}
      children={({ match }) => (
        <Block
          component={Link}
          hoverTextDecoration="underline"
          color={match ? RED : color}
          position="relative"
          props={{ to }}
        >
          {children}
          {match && <Triangle color={triangleColor} />}
        </Block>
      )}
    />
  );
}

NavLink.propTypes = {
  children: PropTypes.string,
  to: PropTypes.string,
  color: PropTypes.string,
  triangleColor: PropTypes.string
};

function NavLinks({ data, environment }) {
  return (
    <Block lineHeight="1.8" padding="10px">
      <Block>
        <Title>Announcements</Title>
        <Block paddingLeft="10px">
          <Block
            component={Link}
            hoverTextDecoration="underline"
            color="black"
            props={{
              href: "https://reacttraining.com/blog/reach-react-router-future/"
            }}
          >
            The Future of React Router
          </Block>
        </Block>
      </Block>
      {Array.isArray(data.examples) &&
        data.examples.length > 0 && (
          <Block>
            <Title>Examples</Title>
            <Block paddingLeft="10px">
              {data.examples.map((item, i) => (
                <NavLink
                  key={i}
                  to={`/${environment}/example/${item.slug}`}
                  triangleColor="rgb(45, 45, 45)"
                  children={item.label}
                />
              ))}
            </Block>
          </Block>
        )}

      <Title>Guides</Title>
      <Block paddingLeft="10px">
        {data.guides &&
          data.guides.map((item, i) => (
            <NavLink
              key={i}
              to={`/${environment}/guides/${item.title.slug}`}
              triangleColor="white"
              children={item.title.text}
            />
          ))}
      </Block>

{'fraction_non_alphanumeric': 0.15239275205203656, 'fraction_numerical': 0.008672758246863869, 'mean_word_length': 2.0135324311712552, 'pattern_counts': {'":': 0, '<': 57, '<?xml version=': 0, '>': 73, 'https://': 1, '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': '3217859', 'n_tokens_mistral': 1909, 'n_tokens_neox': 1879, 'n_words': 381}