Compare commits

...

2 Commits

Author SHA1 Message Date
Ceda EI 6e07c2be85 Add marketplace 2021-01-04 23:53:59 +05:30
Ceda EI 03db7575fd Changes in theming 2021-01-04 23:53:20 +05:30
5 changed files with 76 additions and 2 deletions

View File

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

View File

@ -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%">

View File

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

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