Pro dev page

Author: mewil

src/about-us/components/about-us.js

@@ -0,0 +1,5 @@
+import { h } from 'react-hyperscript-helpers';
+
+import { PageContainer } from '@ktp/ui';
+
+export const AboutPage = () => h(PageContainer, ['About Us']);

src/about-us/components/index.js

@@ -0,0 +1 @@
+export * from './about-us';

src/about-us/index.js

@@ -0,0 +1 @@
+export * from './components';

src/about-us/package.json

@@ -8,5 +8,7 @@
   },
   "author": "",
   "license": "GPL-3.0",
-  "dependencies": {}
+  "dependencies": {
+    "@ktp/ui": "1.0.0"
+  }
 }

src/app/app.js

@@ -11,6 +11,7 @@ require('es6-promise').polyfill();
 
 const App = () => {
   const store = configureStore();
+  window.store = store;
 
   return h(Provider, { store }, [h(RouterConn)]);
 };

src/app/components/routes.js

@@ -3,6 +3,8 @@ import { Route, Switch } from 'react-router';
 
 import { routes } from '../constants';
 import { HomePage } from '@ktp/home';
+import { AboutPage } from '@ktp/about-us';
+import { ProDevPage } from '@ktp/pro-dev';
 import { Login, Logout } from '@ktp/auth';
 
 export const Routes = () =>
@@ -12,6 +14,16 @@ export const Routes = () =>
       path: routes.HOME,
       component: HomePage,
     }),
+    h(Route, {
+      exact: true,
+      path: routes.ABOUT,
+      component: AboutPage,
+    }),
+    h(Route, {
+      exact: true,
+      path: routes.PRODEV,
+      component: ProDevPage,
+    }),
     h(Route, {
       exact: true,
       path: routes.LOGIN,

src/app/constants.js

@@ -7,4 +7,5 @@ export const routes = {
   CONTACT: '/contact',
   LOGIN: '/login',
   LOGOUT: '/logout',
+  PRODEV: '/professional-development',
 };

src/app/package.json

@@ -13,6 +13,8 @@
     "@ktp/theme": "1.0.0",
     "@ktp/user": "1.0.0",
     "@ktp/home": "1.0.0",
-    "@ktp/auth": "1.0.0"
+    "@ktp/auth": "1.0.0",
+    "@ktp/about-us": "1.0.0",
+    "@ktp/pro-dev": "1.0.0"
   }
 }

src/pro-dev/components/index.js

@@ -0,0 +1 @@
+export * from './pro-dev';

src/pro-dev/components/pro-dev.js

@@ -0,0 +1,20 @@
+import { h } from 'react-hyperscript-helpers';
+import { connect } from 'react-redux';
+
+import { PageContainer, PageHeading } from '@ktp/ui';
+import { getTheme } from '@ktp/theme';
+
+export const ProDevPageBase = ({ theme }) =>
+  h(PageContainer, [
+    h(PageHeading, {
+      color: theme.lavender,
+      title: 'Professional Development',
+      subtitle: 'Be more professional',
+    }),
+  ]);
+
+const mapStateToProps = (state) => ({
+  theme: getTheme(state),
+});
+
+export const ProDevPage = connect(mapStateToProps)(ProDevPageBase);