Compare commits
2 Commits
df7470f147
...
6e07c2be85
Author | SHA1 | Date |
---|---|---|
Ceda EI | 6e07c2be85 | |
Ceda EI | 03db7575fd |
|
@ -42,6 +42,8 @@ function Core() {
|
||||||
label="Smart Home" margin="0 0 0 1em" />
|
label="Smart Home" margin="0 0 0 1em" />
|
||||||
<Button onClick={() => dispatch(setPlugin("maps"))} primary
|
<Button onClick={() => dispatch(setPlugin("maps"))} primary
|
||||||
label="Maps" margin="0 0 0 1em" />
|
label="Maps" margin="0 0 0 1em" />
|
||||||
|
<Button onClick={() => dispatch(setPlugin("marketplace"))} primary
|
||||||
|
label="Marketplace" margin="0 0 0 1em" />
|
||||||
</Box>
|
</Box>
|
||||||
</Box>)
|
</Box>)
|
||||||
}
|
}
|
||||||
|
|
|
@ -2,7 +2,7 @@ import React from "react";
|
||||||
|
|
||||||
function VoiceBars() {
|
function VoiceBars() {
|
||||||
return (
|
return (
|
||||||
<div className="waves" style={{transform: "rotate(180deg)", marginTop: "130px"}}>
|
<div className="waves" style={{transform: "rotate(180deg)", marginTop: "130px", transition: "1s"}}>
|
||||||
<svg width="100vw" fill="none" version="1.1"
|
<svg width="100vw" fill="none" version="1.1"
|
||||||
xmlns="http://www.w3.org/2000/svg">
|
xmlns="http://www.w3.org/2000/svg">
|
||||||
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
|
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||||
|
|
|
@ -12,10 +12,13 @@ function GenericPageWithIcon(props) {
|
||||||
direction="column"
|
direction="column"
|
||||||
alignContent="center"
|
alignContent="center"
|
||||||
height="95vh"
|
height="95vh"
|
||||||
|
style={{
|
||||||
|
padding: "0 3em",
|
||||||
|
}}
|
||||||
>
|
>
|
||||||
{props.icon}
|
{props.icon}
|
||||||
<Heading>{props.title}</Heading>
|
<Heading>{props.title}</Heading>
|
||||||
<Text>{props.description}</Text>
|
<Text style={{ textAlign: "center" }}>{props.description}</Text>
|
||||||
<Button primary size="large" onClick={props.close}
|
<Button primary size="large" onClick={props.close}
|
||||||
label="Dismiss" margin="1.5em" />
|
label="Dismiss" margin="1.5em" />
|
||||||
</Box>
|
</Box>
|
||||||
|
|
|
@ -0,0 +1,67 @@
|
||||||
|
import React from "react";
|
||||||
|
import PropTypes from "prop-types";
|
||||||
|
import { Box, Button, Card, CardBody, CardFooter, CardHeader, Heading } from "grommet";
|
||||||
|
import { InstallOption, Trash } from "grommet-icons";
|
||||||
|
|
||||||
|
|
||||||
|
function Marketplace(props) {
|
||||||
|
const plugins = [
|
||||||
|
{
|
||||||
|
name: "Maps",
|
||||||
|
description: "Google Maps is a mapping service. It offers satellite imagery, aerial photography, street maps, 360° interactive panoramic views of streets, real-time traffic conditions, and route planning for traveling.",
|
||||||
|
installed: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Smart Home",
|
||||||
|
description: "Smart Home Plugin lets you integrate with various well known smart devices allowing you to stream video from various devices.",
|
||||||
|
installed: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "Spotify",
|
||||||
|
description: "With Spotify, you have access to a world of music. You can listen to artists and albums, or create your own playlist of your favourite songs.",
|
||||||
|
installed: false
|
||||||
|
},
|
||||||
|
];
|
||||||
|
return (
|
||||||
|
<Box
|
||||||
|
align="center"
|
||||||
|
background="light-1"
|
||||||
|
width="100vw"
|
||||||
|
justify="center"
|
||||||
|
direction="column"
|
||||||
|
alignContent="center"
|
||||||
|
height="95vh"
|
||||||
|
>
|
||||||
|
<Box wrap="wrap" direction="row">
|
||||||
|
{
|
||||||
|
plugins.map(i =>
|
||||||
|
<Card key={i.name} style={{margin: "1em", width: "30%"}}>
|
||||||
|
<CardHeader pad="medium"><Heading>{i.name}</Heading></CardHeader>
|
||||||
|
<CardBody pad="medium">{i.description}</CardBody>
|
||||||
|
<CardFooter pad="medium" justify="center">
|
||||||
|
<Button
|
||||||
|
label={i.installed ? "Uninstall": "Install"}
|
||||||
|
icon={i.installed ?
|
||||||
|
<Trash color="status-error" /> :
|
||||||
|
<InstallOption color="status-ok" />
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</CardFooter>
|
||||||
|
</Card>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
</Box>
|
||||||
|
<Button primary size="large" onClick={props.close}
|
||||||
|
label="Dismiss" margin="1.5em" />
|
||||||
|
</Box>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
Marketplace.propTypes = {
|
||||||
|
data: PropTypes.object,
|
||||||
|
close: PropTypes.func
|
||||||
|
};
|
||||||
|
|
||||||
|
Marketplace.pluginName = "Marketplace";
|
||||||
|
|
||||||
|
export default Marketplace;
|
|
@ -5,6 +5,7 @@ import Accident from "./Accident";
|
||||||
import PetMode from "./PetMode";
|
import PetMode from "./PetMode";
|
||||||
import SmartHome from "./SmartHome";
|
import SmartHome from "./SmartHome";
|
||||||
import Maps from "./Maps";
|
import Maps from "./Maps";
|
||||||
|
import Marketplace from "./Marketplace";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
warning: Warning,
|
warning: Warning,
|
||||||
|
@ -14,4 +15,5 @@ export default {
|
||||||
petMode: PetMode,
|
petMode: PetMode,
|
||||||
smartHome: SmartHome,
|
smartHome: SmartHome,
|
||||||
maps: Maps,
|
maps: Maps,
|
||||||
|
marketplace: Marketplace,
|
||||||
};
|
};
|
||||||
|
|
Loading…
Reference in New Issue