Create the front page of the OSD
This commit is contained in:
parent
446afb939a
commit
7ed58e94d8
35
src/Core.js
35
src/Core.js
|
@ -1,5 +1,6 @@
|
||||||
import React from "react";
|
import React from "react";
|
||||||
import { useSelector, useDispatch } from "react-redux";
|
import { useSelector, useDispatch } from "react-redux";
|
||||||
|
import { Box, Button, Clock } from "grommet";
|
||||||
|
|
||||||
import { setPlugin, selectCore } from "./coreSlice";
|
import { setPlugin, selectCore } from "./coreSlice";
|
||||||
import * as plugins from "./plugins";
|
import * as plugins from "./plugins";
|
||||||
|
@ -12,21 +13,29 @@ function Core() {
|
||||||
data: coreState.data,
|
data: coreState.data,
|
||||||
close: () => dispatch(setPlugin(false))
|
close: () => dispatch(setPlugin(false))
|
||||||
};
|
};
|
||||||
|
const dummyButtons = ["Maps", "Home Devices", "Phone"];
|
||||||
return <>
|
return <>
|
||||||
{plugin ? null :
|
{plugin ? plugin(props) : (
|
||||||
<>
|
<Box
|
||||||
<p>Welcome to Honda!</p>
|
align="center"
|
||||||
{Object.keys(plugins.default).map(
|
background="light-1"
|
||||||
i => <p
|
width="100vw"
|
||||||
onClick={() => dispatch(setPlugin(i))}
|
justify="center"
|
||||||
key={i}
|
direction="column"
|
||||||
>
|
alignContent="center"
|
||||||
{plugins.default[i].pluginName}
|
height="100vh"
|
||||||
</p>)
|
>
|
||||||
}
|
<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}
|
|
||||||
</>;
|
</>;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue