Create the front page of the OSD

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}
 	</>;
 }