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.
37 lines
1.2 KiB
37 lines
1.2 KiB
import React from "react"; |
|
import { Box, Text } from "grommet"; |
|
import { StatusGoodSmall } from "grommet-icons"; |
|
|
|
import { stateToColor } 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" direction="row" align="center" gap="small"> |
|
<StatusGoodSmall |
|
size="medium" |
|
color={stateToColor(property.vector.state)} |
|
/> |
|
<Text>{property.vector.label || property.name}</Text> |
|
</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;
|
|
|