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.
40 lines
1.1 KiB
40 lines
1.1 KiB
import React, {useState} from "react";
|
|
import {Badge, Col, ListGroupItem, Row} from "reactstrap";
|
|
import {percentage} from "../Helpers/percentage";
|
|
import ColorModal from "./Modals/ColorModal";
|
|
import {changeColor} from "../Helpers/lights";
|
|
|
|
function Light({id, name, color, brightness}) {
|
|
const pc = percentage(brightness, 255);
|
|
|
|
const [modal, setModal] = useState(false);
|
|
|
|
return (
|
|
<ListGroupItem>
|
|
<Row>
|
|
<Col xs={7}>
|
|
{name}
|
|
</Col>
|
|
<Col xs={3}>
|
|
<Badge style={{backgroundColor: `#${color}`}} onClick={() => setModal(true)}>
|
|
{color.toUpperCase()}
|
|
</Badge>
|
|
</Col>
|
|
<Col xs={2}>
|
|
<Badge style={{backgroundColor: `gray(${brightness})`}}>{pc}</Badge>
|
|
</Col>
|
|
</Row>
|
|
{modal && (
|
|
<ColorModal value={color}
|
|
onConfirm={newColor => {
|
|
changeColor(id, newColor);
|
|
setModal(false);
|
|
}}
|
|
onCancel={() => setModal(false)}
|
|
/>
|
|
)}
|
|
</ListGroupItem>
|
|
);
|
|
}
|
|
|
|
export default Light;
|