Add marketplace

This commit is contained in:
Ceda EI 2021-01-04 23:53:59 +05:30
parent 03db7575fd
commit 6e07c2be85
3 changed files with 71 additions and 0 deletions

View File

@ -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>)
} }

View File

@ -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;

View File

@ -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,
}; };