#3 Creating the Store

Author: serranoarevalo

package.json

@@ -5,6 +5,7 @@
   "dependencies": {
     "react": "^16.3.2",
     "react-dom": "^16.3.2",
+    "react-fontawesome": "^1.6.1",
     "react-scripts": "1.1.4",
     "styled-components": "^3.2.6",
     "styled-flex-component": "^2.2.2",

public/index.html

@@ -11,6 +11,7 @@
     -->
   <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
   <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
   <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.

src/App.js

@@ -0,0 +1,15 @@
+import React, { Component } from "react";
+import AppPresenter from "./AppPresenter";
+import Store from "store";
+
+class AppContainer extends Component {
+  render() {
+    return (
+      <Store.Provider>
+        <AppPresenter />
+      </Store.Provider>
+    );
+  }
+}
+
+export default AppContainer;

src/Components/App/AppContainer.js

@@ -0,0 +1,15 @@
+import React, { Fragment } from "react";
+import Header from "Components/Header";
+import Flex from "styled-flex-component";
+import Notification from "Components/Notification";
+
+const AppPresenter = () => (
+  <Fragment>
+    <Header />
+    <Flex alignCenter full column>
+      <Notification text={"Hello"} seen={false} />
+    </Flex>
+  </Fragment>
+);
+
+export default AppPresenter;

src/Components/App/AppPresenter.js

@@ -0,0 +1,2 @@
+import AppContainer from "./AppContainer";
+export default AppContainer;

src/Components/App/index.js

@@ -0,0 +1,12 @@
+import React, { Component } from "react";
+import HeaderPresenter from "./HeaderPresenter";
+
+class HeaderContainer extends Component {
+  static propTypes = {};
+  state = {};
+  render() {
+    return <HeaderPresenter {...this.state} />;
+  }
+}
+
+export default HeaderContainer;

src/Components/Header/HeaderContainer.js

@@ -0,0 +1,70 @@
+import React from "react";
+import styled from "styled-components";
+import Flex, { FlexItem } from "styled-flex-component";
+import FontAwesome from "react-fontawesome";
+
+const Header = styled.header`
+  height: 100px;
+  background-color: #ecf0f1;
+  padding: 0 40px;
+  margin-bottom: 30px;
+`;
+
+const HeaderIcon = styled.span`
+  width: 40px;
+  height: 40px;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  border-radius: 50%;
+  color: white;
+  background-color: #3498db;
+  margin-right: 30px;
+  cursor: pointer;
+  box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);
+  transition: all 0.2s ease-out;
+  position: relative;
+  &:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 7px 14px rgba(50, 50, 93, 0.1), 0 3px 6px rgba(0, 0, 0, 0.08);
+  }
+`;
+
+const Number = styled.span`
+  height: 30px;
+  width: 30px;
+  border-radius: 50%;
+  background-color: #8e44ad;
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  left: 25px;
+  top: -10px;
+`;
+
+const HeaderPresenter = () => (
+  <Header>
+    <Flex full justifyBetween alignCenter>
+      <FlexItem>
+        <h3>Antiredux</h3>
+      </FlexItem>
+      <FlexItem>
+        <Flex>
+          <HeaderIcon>
+            <FontAwesome name="user" />
+          </HeaderIcon>
+          <HeaderIcon>
+            <FontAwesome name="cog" />
+          </HeaderIcon>
+          <HeaderIcon>
+            <FontAwesome name="bell" />
+            <Number>10</Number>
+          </HeaderIcon>
+        </Flex>
+      </FlexItem>
+    </Flex>
+  </Header>
+);
+
+export default HeaderPresenter;

src/Components/Header/HeaderPresenter.js

@@ -0,0 +1,2 @@
+import HeaderContainer from "./HeaderContainer";
+export default HeaderContainer;

src/Components/Header/index.js

@@ -0,0 +1,12 @@
+import React, { Component } from "react";
+import NotificationPresenter from "./NotificationPresenter";
+
+class NotificationContainer extends Component {
+  static propTypes = {};
+  state = {};
+  render() {
+    return <NotificationPresenter {...this.props} {...this.state} />;
+  }
+}
+
+export default NotificationContainer;