4 files changed, 99 insertions, 0 deletions
diff --git a/client/src/admin/jsx/App.jsx b/client/src/admin/jsx/App.jsx
new file mode 100644
index 0000000..c5be77c
--- /dev/null
+++ b/client/src/admin/jsx/App.jsx
@@ -0,0 +1,36 @@
+import React, { useState, useEffect } from 'react';
+import ReactDOM from 'react-dom';
+
+import "../scss/index.scss";
+
+import texts from '../../common/data/texts.js';
+import TopBar from '../../common/jsx/TopBar.jsx';
+import Info from '../../common/jsx/Info.jsx';
+import MainScreen from './MainScreen.jsx';
+
+const App = () => {
+  const [adminLang, setAdminLang] = useState('en');
+  const [projects, setProjects] = useState([]);
+  const [info, setInfo] = useState('');
+  const [hover, setHover] = useState('');
+  const [view, setView] = useState('main');
+  const [user, setUser] = useState(null);
+  const t = (key) => texts[adminLang][key] || texts['en'][key];
+
+  // useEffect(() => {
+  //   setInfo('no-saved-websites')
+  //   setHover('');
+  // }, [user]);
+
+  return (
+    <div className="main">
+      <TopBar lang={adminLang} setLang={setAdminLang} setHover={setHover} user={user} setUser={setUser} t={t} />
+      <div className="main__content">
+        { view === 'main' && <MainScreen projects={projects} t={t} setHover={setHover} /> }
+      </div>
+      <Info info={info} hover={hover} t={t} />
+    </div>
+  )
+};
+
+ReactDOM.render(<App />, document.getElementById('app'));
diff --git a/client/src/admin/jsx/MainScreen.jsx b/client/src/admin/jsx/MainScreen.jsx
new file mode 100644
index 0000000..ff28256
--- /dev/null
+++ b/client/src/admin/jsx/MainScreen.jsx
@@ -0,0 +1,25 @@
+import React, { Fragment } from 'react';
+import WithHover from '../../common/jsx/WithHover.jsx';
+
+const MainScreen = ({ projects, t, setHover }) => (
+  <div className="main-screen">
+    <h1 className="main-screen__header">{ t('main-title') }</h1>
+    <div className="main-screen__list">
+      { !projects.length && (
+        <WithHover setHover={setHover} message="edit-current-project-hover">
+          <p className="main-screen__item">{ t('edit-current-project') }</p>
+        </WithHover>
+      )}
+      { !projects.length && (
+        <WithHover setHover={setHover} message="show-saved-projects-hover">
+          <p className="main-screen__item">{ t('show-saved-projects') }</p>
+        </WithHover>
+      )}
+      <WithHover setHover={setHover} message="create-new-project-hover">
+        <p className="main-screen__item">{ t('create-new-project') }</p>
+      </WithHover>
+    </div>
+  </div>
+);
+
+export default MainScreen;
diff --git a/client/src/admin/scss/_mainScreen.scss b/client/src/admin/scss/_mainScreen.scss
new file mode 100644
index 0000000..4eec73a
--- /dev/null
+++ b/client/src/admin/scss/_mainScreen.scss
@@ -0,0 +1,30 @@
+.main-screen {
+  text-align: center;
+
+  &__header {
+    display: block;
+    margin-top: 10vh;
+    margin-bottom: 20vh;
+    font-size: 300%;
+    color: white;
+    text-align: center;
+  }
+
+  &__list {
+    display: inline-block;
+  }
+
+  &__item {
+    font-size: 175%;
+    color: white;
+    transition: color .3s;
+    cursor: pointer;
+    margin-top: 5vh;
+    margin-bottom: 5vh;
+
+    &:hover {
+      color: $text-selected;
+    }
+  }
+
+}
diff --git a/client/src/admin/scss/index.scss b/client/src/admin/scss/index.scss
new file mode 100644
index 0000000..67553bb
--- /dev/null
+++ b/client/src/admin/scss/index.scss
@@ -0,0 +1,8 @@
+@import '../../common/scss/reset';
+@import '../../common/scss/colors';
+@import '../../common/scss/globals';
+@import '../../common/scss/forms';
+@import '../../common/scss/main';
+@import '../../common/scss/info';
+@import '../../common/scss/topBar';
+@import 'mainScreen';