54 lines
1.7 KiB
JavaScript
54 lines
1.7 KiB
JavaScript
import React from "react";
|
|
import { useSelector, useDispatch } from "react-redux";
|
|
import { Box, Button, Clock, Text } from "grommet";
|
|
|
|
import { setPlugin, selectCore } from "./coreSlice";
|
|
import { selectVoice } from "./voiceSlice";
|
|
import VoiceBars from "./components/VoiceBars";
|
|
import plugins from "./plugins";
|
|
|
|
function Core() {
|
|
const coreState = useSelector(selectCore);
|
|
const voiceState = useSelector(selectVoice);
|
|
const dispatch = useDispatch();
|
|
const plugin = plugins[coreState.plugin];
|
|
const props = {
|
|
data: coreState.data,
|
|
close: () => dispatch(setPlugin(false))
|
|
};
|
|
return <>
|
|
<Box height="5vh" background="light-1" justify="center" direction="row">
|
|
{voiceState.recording ? <VoiceBars style={{height: "100%"}}/>:
|
|
voiceState.text === null ? null:
|
|
<Text style={{paddingTop: "1em"}}>{voiceState.text}</Text>
|
|
}
|
|
</Box>
|
|
{plugin ? React.createElement(plugin, props, null) : (
|
|
<Box
|
|
align="center"
|
|
background="light-1"
|
|
width="100vw"
|
|
justify="center"
|
|
direction="column"
|
|
alignContent="center"
|
|
height="95vh"
|
|
>
|
|
<Clock size="xxlarge" />
|
|
<Clock size="xxlarge" type="digital" />
|
|
<Box direction="row" margin="1.5em" wrap={true}>
|
|
<Button onClick={() => dispatch(setPlugin("petMode"))} primary
|
|
label="Pet Mode" />
|
|
<Button onClick={() => dispatch(setPlugin("smartHome"))} primary
|
|
label="Smart Home" margin="0 0 0 1em" />
|
|
<Button onClick={() => dispatch(setPlugin("maps"))} primary
|
|
label="Maps" margin="0 0 0 1em" />
|
|
<Button onClick={() => dispatch(setPlugin("marketplace"))} primary
|
|
label="Marketplace" margin="0 0 0 1em" />
|
|
</Box>
|
|
</Box>)
|
|
}
|
|
</>;
|
|
}
|
|
|
|
export default Core;
|