refactor(v2): extract out into standalone components (#1017)

v2/lib/theme/Layout/index.js

@@ -1,6 +1,5 @@
 import React from 'react';
-import {Link} from 'react-router-dom';
-import styles from './styles.css';
+import Footer from '@theme/Footer'; // eslint-disable-line
 
 /* eslint-disable react/prefer-stateless-function */
 export default class Layout extends React.Component {
@@ -11,21 +10,14 @@ export default class Layout extends React.Component {
       docsMetadatas = {},
       location,
     } = this.props;
-    const docsFlatMetadatas = Object.values(docsMetadatas);
-    const routeLinks = [...pagesMetadatas, ...docsFlatMetadatas].map(
-      data =>
-        data.permalink !== location.pathname && (
-          <li key={data.permalink}>
-            <Link to={data.permalink}>{data.permalink}</Link>
-          </li>
-        ),
-    );
     return (
       <div>
         {children}
-        <div className={styles.footer}>
-          <ul className={styles.routeLinks}>{routeLinks}</ul>
-        </div>
+        <Footer
+          docsMetadatas={docsMetadatas}
+          location={location}
+          pagesMetadatas={pagesMetadatas}
+        />
       </div>
     );
   }

v2/lib/theme/Layout/styles.css

@@ -1,39 +0,0 @@
-.footer {
-	color: #777;
-	margin-top: 30px;
-	padding: 10px 15px;
-	height: 20px;
-	text-align: center;
-	border-top: 1px solid #e6e6e6;
-}
-
-.routeLinks {
-	margin: 0;
-	padding: 0;
-	list-style: none;
-	position: absolute;
-	right: 0;
-	left: 0;
-}
-
-.routeLinks li {
-	display: inline;
-}
-
-.routeLinks li a {
-	color: inherit;
-	margin: 3px;
-	padding: 3px 7px;
-	text-decoration: none;
-	border: 1px solid transparent;
-	border-radius: 3px;
-}
-
-.routeLinks li a.selected,
-.routeLinks li a:hover {
-	border-color: rgba(175, 47, 47, 0.1);
-}
-
-.routeLinks li a.selected {
-	border-color: rgba(175, 47, 47, 0.2);
-}