68 lines
1.9 KiB
JavaScript
68 lines
1.9 KiB
JavaScript
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;
|