Add marketplace

src/Core.js

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

src/components/VoiceBars.js

@@ -2,7 +2,7 @@ import React from "react";
 
 function VoiceBars() {
 	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"
 				xmlns="http://www.w3.org/2000/svg">
 				<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">

src/plugins/GenericPageWithIcon.js

@@ -12,10 +12,13 @@ function GenericPageWithIcon(props) {
 			direction="column"
 			alignContent="center"
 			height="95vh"
+			style={{
+				padding: "0 3em",
+			}}
 		>
 			{props.icon}
 			<Heading>{props.title}</Heading>
-			<Text>{props.description}</Text>
+			<Text style={{ textAlign: "center" }}>{props.description}</Text>
 			<Button primary size="large" onClick={props.close}
 				label="Dismiss" margin="1.5em" />
 		</Box>

src/plugins/Marketplace.js

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

src/plugins/index.js

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