react-7-segment-display-plus/dist/cjs/components/Dot.js

A react component that simulates a 7-segment display

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Dot = void 0;
const react_1 = __importDefault(require("react"));
const Dot = ({ active = false, color = "red", height = 250, skew = false, }) => {
    const style = {
        height: `${height / 12.5}px`,
        width: `${height / 12.5}px`,
        backgroundColor: color,
        filter: active
            ? "opacity(1) grayscale(0)"
            : "opacity(0.3) grayscale(0.7)",
        borderRadius: "50%",
        margin: "2px",
        transform: skew ? "rotate(45deg)" : "none",
    };
    const dotStyle = {
        display: "flex",
        flexDirection: "row",
        justifyContent: "center",
        alignItems: "end",
        height: `${height}px`,
        width: "fit-content",
        marginBottom: `${height / 12.5}px`,
    };
    return (react_1.default.createElement("div", { style: dotStyle },
        react_1.default.createElement("div", { style: style })));
};
exports.Dot = Dot;
//# sourceMappingURL=Dot.js.map