From 7ed58e94d885651a0441c7762e7bc4432b0794ab Mon Sep 17 00:00:00 2001
From: Ceda EI <ceda_ei@webionite.com>
Date: Mon, 21 Dec 2020 17:51:27 +0530
Subject: [PATCH] Create the front page of the OSD

---
 src/Core.js | 35 ++++++++++++++++++++++-------------
 1 file changed, 22 insertions(+), 13 deletions(-)

diff --git a/src/Core.js b/src/Core.js
index e957457..1ecadab 100644
--- a/src/Core.js
+++ b/src/Core.js
@@ -1,5 +1,6 @@
 import React from "react";
 import { useSelector, useDispatch } from "react-redux";
+import { Box, Button, Clock } from "grommet";
 
 import { setPlugin, selectCore } from "./coreSlice";
 import * as plugins from "./plugins";
@@ -12,21 +13,29 @@ function Core() {
 		data: coreState.data,
 		close: () => dispatch(setPlugin(false))
 	};
+	const dummyButtons = ["Maps", "Home Devices", "Phone"];
 	return <>
-		{plugin ? null :
-			<>
-				<p>Welcome to Honda!</p>
-				{Object.keys(plugins.default).map(
-					i => <p
-						onClick={() => dispatch(setPlugin(i))}
-						key={i}
-					>
-						{plugins.default[i].pluginName}
-					</p>)
-				}
-			</>
+		{plugin ? plugin(props) : (
+			<Box
+				align="center"
+				background="light-1"
+				width="100vw"
+				justify="center"
+				direction="column"
+				alignContent="center"
+				height="100vh"
+			>
+				<Clock size="xxlarge" />
+				<Clock size="xxlarge" type="digital" />
+				<Box direction="row" margin="1.5em" wrap={true}>
+					<Button onClick={() => dispatch(setPlugin("mpd"))} primary
+						label="Music Player" />
+					{dummyButtons.map(i =>
+						<Button primary label={i} key={i} margin="0 0 0 1em" />
+					)}
+				</Box>
+			</Box>)
 		}
-		{plugin ? plugin(props) :null}
 	</>;
 }