diff --git a/package.json b/package.json index 4fc1741c..029b3241 100644 --- a/package.json +++ b/package.json @@ -38,6 +38,8 @@ "react": "^16.3.2", "react-dev-utils": "^5.0.1", "react-dom": "^16.3.2", + "react-redux": "^5.0.7", + "react-router-dom": "^4.2.2", "reactstrap": "^6.0.1", "resolve": "1.6.0", "style-loader": "0.19.0", diff --git a/src/App.js b/src/App.js index 7c98ca05..14a7a6f7 100644 --- a/src/App.js +++ b/src/App.js @@ -1,6 +1,9 @@ import React from 'react'; import './App.scss'; +import { Route, Switch } from 'react-router-dom'; +import Home from './common/Home'; import MainHeader from './common/MainHeader'; +import CreateServer from './servers/CreateServer'; export default class App extends React.Component { render() { @@ -8,8 +11,10 @@ export default class App extends React.Component {
-

Welcome to Shlink

-
Please, select a server.
+ + + +
); diff --git a/src/App.scss b/src/App.scss index ebfad4db..ee20cf2b 100644 --- a/src/App.scss +++ b/src/App.scss @@ -1,12 +1,5 @@ -.app { - text-align: center; - height: 100vh; - display: flex; - align-items: center; - justify-content: center; - flex-flow: column; -} +@import "./utils/base"; -.app__title { - font-size: 36px; +.app { + padding-top: $headerHeight; } diff --git a/src/common/Home.js b/src/common/Home.js new file mode 100644 index 00000000..9a16a084 --- /dev/null +++ b/src/common/Home.js @@ -0,0 +1,11 @@ +import React from 'react'; +import './Home.scss'; + +export default () => { + return ( +
+

Welcome to Shlink

+
Please, select a server.
+
+ ); +}; diff --git a/src/common/Home.scss b/src/common/Home.scss new file mode 100644 index 00000000..07669eb6 --- /dev/null +++ b/src/common/Home.scss @@ -0,0 +1,14 @@ +@import "../utils/base"; + +.home-container { + text-align: center; + height: calc(100vh - #{$headerHeight}); + display: flex; + align-items: center; + justify-content: center; + flex-flow: column; +} + +.home-container__title { + font-size: 36px; +} diff --git a/src/common/MainHeader.js b/src/common/MainHeader.js index ec3d5a06..30c7a89c 100644 --- a/src/common/MainHeader.js +++ b/src/common/MainHeader.js @@ -14,6 +14,7 @@ import { } from 'reactstrap'; import './MainHeader.scss'; import shlinkLogo from './shlink-logo-white.png'; +import { Link } from 'react-router-dom'; export default class MainHeader extends React.Component { constructor(props) { @@ -40,7 +41,7 @@ export default class MainHeader extends React.Component {