1 files changed, 67 insertions, 0 deletions
diff --git a/pages/index.js b/pages/index.js
new file mode 100644
index 0000000..9df0acf
--- /dev/null
+++ b/pages/index.js
@@ -0,0 +1,67 @@
+import React, { useState ,useRef } from 'react'
+import useUser from 'lib/useUser'
+import {Layout, App} from 'components'
+import {open} from 'helpers/windowActions'
+import {Notes} from 'apps'
+
+const appList = {
+  Notes,
+};
+
+const Home = () => {
+  const [apps, setApps] = useState([])
+  const {mutateUser} = useUser({
+    redirectToLogin: true,
+    redirectToVerify: true,
+    redirectToApps: true,
+  })
+
+  return (
+    <Layout apps={apps} setApps={setApps}>
+      <>
+        {
+          Object.keys(appList).map(appName => (
+            <div key={`${appName}_icon`} onClick={() => open(appName, apps, setApps)}>
+              <img src={`./${appName.toLowerCase()}.svg`} alt={`${appName} Icon`} />
+              <p>{appName}</p>
+            </div>
+          ))
+        }
+        { apps && apps.map(app => {
+           const AppName = appList[app.name]
+
+           return (
+             <App
+               key={`${app.name}_app`}
+               app={app}
+               apps={apps}
+               setApps={setApps}
+             >
+               <AppName />
+             </App>
+           );
+        })}
+        <style jsx>{`
+          div {
+            text-decoration: none;
+            display: inline-block;
+            width: 4em;
+            cursor: pointer;
+          }
+
+          img {
+            width: 4em;
+          }
+
+          p {
+            padding-top: .5em;
+            text-align: center;
+            color: #333;
+          }
+        `}</style>
+      </>
+    </Layout>
+  )
+}
+
+export default Home