Added stub translations page

Author: Brian Vaughn

src/components/LayoutHeader/Header.js

@@ -15,9 +15,6 @@ import ExternalLinkSvg from 'templates/components/ExternalLinkSvg';
 import DocSearch from './DocSearch';
 
 import logoSvg from 'icons/logo.svg';
-import languages from '../../../crowdin/languages.json';
-
-// TODO Use languages array to power locale drop-down
 
 const Header = ({location}: {location: Location}) => (
   <header
@@ -142,6 +139,10 @@ const Header = ({location}: {location: Location}) => (
 
         <div
           css={{
+            display: 'flex',
+            alignItems: 'center',
+            whiteSpace: 'nowrap',
+
             [media.lessThan('medium')]: {
               display: 'none',
             },
@@ -152,7 +153,6 @@ const Header = ({location}: {location: Location}) => (
           <a
             css={{
               padding: '5px 10px',
-              whiteSpace: 'nowrap',
               ...fonts.small,
 
               ':hover': {
@@ -168,6 +168,30 @@ const Header = ({location}: {location: Location}) => (
             href="/versions">
             v{version}
           </a>
+          <a
+            css={{
+              padding: 5,
+              marginLeft: 10,
+              display: 'inline-flex',
+              ...fonts.small,
+
+              ':hover': {
+                color: colors.brand,
+              },
+
+              ':focus': {
+                outline: 0,
+                backgroundColor: colors.lighter,
+                borderRadius: 15,
+              },
+            }}
+            alt="Translations"
+            href="/translations">
+            <svg width="20" height="20" viewBox="0 0 24 24">
+              <path fill="none" d="M0 0h24v24H0z" />
+              <path fill="currentColor" d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zm6.93 6h-2.95c-.32-1.25-.78-2.45-1.38-3.56 1.84.63 3.37 1.91 4.33 3.56zM12 4.04c.83 1.2 1.48 2.53 1.91 3.96h-3.82c.43-1.43 1.08-2.76 1.91-3.96zM4.26 14C4.1 13.36 4 12.69 4 12s.1-1.36.26-2h3.38c-.08.66-.14 1.32-.14 2 0 .68.06 1.34.14 2H4.26zm.82 2h2.95c.32 1.25.78 2.45 1.38 3.56-1.84-.63-3.37-1.9-4.33-3.56zm2.95-8H5.08c.96-1.66 2.49-2.93 4.33-3.56C8.81 5.55 8.35 6.75 8.03 8zM12 19.96c-.83-1.2-1.48-2.53-1.91-3.96h3.82c-.43 1.43-1.08 2.76-1.91 3.96zM14.34 14H9.66c-.09-.66-.16-1.32-.16-2 0-.68.07-1.35.16-2h4.68c.09.65.16 1.32.16 2 0 .68-.07 1.34-.16 2zm.25 5.56c.6-1.11 1.06-2.31 1.38-3.56h2.95c-.96 1.65-2.49 2.93-4.33 3.56zM16.36 14c.08-.66.14-1.32.14-2 0-.68-.06-1.34-.14-2h3.38c.16.64.26 1.31.26 2s-.1 1.36-.26 2h-3.38z" />
+            </svg>
+          </a>
           <a
             css={{
               padding: '5px 10px',

src/pages/translations.js

@@ -0,0 +1,51 @@
+/**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ *
+ * @emails react-core
+ * @flow
+ */
+
+import Container from 'components/Container';
+import Header from 'components/Header';
+import TitleAndMetaTags from 'components/TitleAndMetaTags';
+import Link from 'gatsby-link';
+import React from 'react';
+import {sharedStyles} from 'theme';
+
+// $FlowFixMe This is a valid path
+import languages from '../../crowdin/languages.json';
+
+const Translations = () => (
+  <Container>
+    <div css={sharedStyles.articleLayout.container}>
+      <div css={sharedStyles.articleLayout.content}>
+        <Header>Translations</Header>
+        <TitleAndMetaTags title="React - Translations" />
+        <div css={sharedStyles.markdown}>
+          <p>
+            React docs have been translated by the community into the following languages:
+          </p>
+          <ul>
+            {languages.map(language => (
+              <li key={language}>
+                <Link
+                  to={`/${language}/docs/hello-world.html`}>
+                  {language}
+                </Link>
+              </li>
+            ))}
+          </ul>
+          <p>
+            Visit <a
+              href="https://crowdin.com/project/react"
+              target="_blank"
+              rel="noopener">crowdin.com/project/react
+            </a> if you would like to contribute to these translations.
+          </p>
+        </div>
+      </div>
+    </div>
+  </Container>
+);
+
+export default Translations;