Add marketplace
This commit is contained in:
parent
03db7575fd
commit
6e07c2be85
|
@ -42,6 +42,8 @@ function Core() {
|
|||
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>)
|
||||
}
|
||||
|
|
|
@ -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 SmartHome from "./SmartHome";
|
||||
import Maps from "./Maps";
|
||||
import Marketplace from "./Marketplace";
|
||||
|
||||
export default {
|
||||
warning: Warning,
|
||||
|
@ -14,4 +15,5 @@ export default {
|
|||
petMode: PetMode,
|
||||
smartHome: SmartHome,
|
||||
maps: Maps,
|
||||
marketplace: Marketplace,
|
||||
};
|
||||
|
|
Loading…
Reference in New Issue