You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
36 lines
1.0 KiB
36 lines
1.0 KiB
|
6 years ago
|
import React from "react";
|
||
|
|
import { Box } from "grommet";
|
||
|
|
|
||
|
|
import { stateToEmoji } from "../../utils/indi";
|
||
|
|
import LightVector from "./light";
|
||
|
|
import NumberVector from "./number";
|
||
|
|
import SwitchVector from "./switch";
|
||
|
|
import TextVector from "./text";
|
||
|
|
|
||
|
|
const Property = ({ property }) => {
|
||
|
|
return (
|
||
|
|
<Box direction="row" margin={{bottom: "medium"}} align="center">
|
||
|
|
<Box width="medium">
|
||
|
|
<div>
|
||
|
|
{stateToEmoji(property.vector.state)}{" "}
|
||
|
|
<strong>{property.vector.label || property.name}</strong>
|
||
|
|
</div>
|
||
|
|
</Box>
|
||
|
|
{property.vector.__typename === "NumberVector" && (
|
||
|
|
<NumberVector vector={property.vector} />
|
||
|
|
)}
|
||
|
|
{property.vector.__typename === "SwitchVector" && (
|
||
|
|
<SwitchVector vector={property.vector} />
|
||
|
|
)}
|
||
|
|
{property.vector.__typename === "TextVector" && (
|
||
|
|
<TextVector vector={property.vector} />
|
||
|
|
)}
|
||
|
|
{property.vector.__typename === "LightVector" && (
|
||
|
|
<LightVector vector={property.vector} />
|
||
|
|
)}
|
||
|
|
</Box>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default Property;
|