From 8fce4efb4f5a49ca8450ca1f28a60ce3c334c32f Mon Sep 17 00:00:00 2001
From: Tudor Stanciu <tudor.stanciu94@gmail.com>
Date: Sat, 11 Apr 2020 01:56:55 +0300
Subject: [PATCH] HomePage, AboutPage, Header and Navigation

---
 src/components/App.js             | 17 +++++++++++++++++
 src/components/about/AboutPage.js | 13 +++++++++++++
 src/components/common/Header.js   | 20 ++++++++++++++++++++
 src/components/home/HomePage.js   | 14 ++++++++++++++
 src/index.css                     |  8 ++++++++
 src/index.js                      | 15 ++++++++++-----
 6 files changed, 82 insertions(+), 5 deletions(-)
 create mode 100644 src/components/App.js
 create mode 100644 src/components/about/AboutPage.js
 create mode 100644 src/components/common/Header.js
 create mode 100644 src/components/home/HomePage.js
 create mode 100644 src/index.css

diff --git a/src/components/App.js b/src/components/App.js
new file mode 100644
index 0000000..70203c9
--- /dev/null
+++ b/src/components/App.js
@@ -0,0 +1,17 @@
+import React from "react";
+import { Route } from "react-router-dom";
+import HomePage from "./home/HomePage";
+import AboutPage from "./about/AboutPage";
+import Header from "./common/Header";
+
+function App() {
+  return (
+    <div className="container-fluid">
+      <Header />
+      <Route exact path="/" component={HomePage} />
+      <Route path="/about" component={AboutPage} />
+    </div>
+  );
+}
+
+export default App;
diff --git a/src/components/about/AboutPage.js b/src/components/about/AboutPage.js
new file mode 100644
index 0000000..70b312a
--- /dev/null
+++ b/src/components/about/AboutPage.js
@@ -0,0 +1,13 @@
+import React from "react";
+
+const AboutPage = () => (
+  <div>
+    <h2>About</h2>
+    <p>
+      This app uses React, Redux, React Router, and many other helpful
+      libraries.
+    </p>
+  </div>
+);
+
+export default AboutPage;
diff --git a/src/components/common/Header.js b/src/components/common/Header.js
new file mode 100644
index 0000000..cdff2ad
--- /dev/null
+++ b/src/components/common/Header.js
@@ -0,0 +1,20 @@
+import React from "react";
+import { NavLink } from "react-router-dom";
+
+const Header = () => {
+  const activeStyle = { color: "#F15B2A" };
+
+  return (
+    <nav>
+      <NavLink to="/" activeStyle={activeStyle} exact>
+        Home
+      </NavLink>
+      {" | "}
+      <NavLink to="/about" activeStyle={activeStyle}>
+        About
+      </NavLink>
+    </nav>
+  );
+};
+
+export default Header;
diff --git a/src/components/home/HomePage.js b/src/components/home/HomePage.js
new file mode 100644
index 0000000..76fc462
--- /dev/null
+++ b/src/components/home/HomePage.js
@@ -0,0 +1,14 @@
+import React from "react";
+import { Link } from "react-router-dom";
+
+const HomePage = () => (
+  <div className="jumbotron">
+    <h1>Pluralsight Administration</h1>
+    <p>React, Redux and React Router for ultra-responsive web apps.</p>
+    <Link to="about" className="btn btn-primary btn-lg">
+      Learn more
+    </Link>
+  </div>
+);
+
+export default HomePage;
diff --git a/src/index.css b/src/index.css
new file mode 100644
index 0000000..af9c428
--- /dev/null
+++ b/src/index.css
@@ -0,0 +1,8 @@
+#app {
+  max-width: 850px;
+  margin: 0 auto;
+}
+
+nav {
+  padding: 20px 0 20px 0;
+}
diff --git a/src/index.js b/src/index.js
index c908e6e..67923c1 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,8 +1,13 @@
 import React from "react";
 import { render } from "react-dom";
+import { BrowserRouter as Router } from "react-router-dom";
+import "bootstrap/dist/css/bootstrap.min.css";
+import App from "./components/App";
+import "./index.css";
 
-function Hi() {
-  return <p>Hi.</p>;
-}
-
-render(<Hi />, document.getElementById("app"));
+render(
+  <Router>
+    <App />
+  </Router>,
+  document.getElementById("app")
+);