lingo3d/lib/editor/component/Switch.js

Lingo3D is a React/Vue 3d game development framework that ships with a complete visual editor

import { jsx as _jsx, jsxs as _jsxs } from "preact/jsx-runtime";
import { useEffect, useState } from "preact/hooks";
const Switch = ({ label, onChange, on: onProp, compact }) => {
    const [on, setOn] = useState(false);
    useEffect(() => {
        setOn(!!onProp);
    }, [onProp]);
    return (_jsxs("div", { style: {
            display: "flex",
            alignItems: "center",
            gap: 4,
            marginLeft: 4,
            transition: "all 100ms",
            opacity: on ? 1 : 0.5,
            cursor: "pointer"
        }, onClick: () => {
            setOn(!on);
            onChange?.(!on);
        }, children: [_jsx("div", { style: {
                    width: compact ? 30 : 40,
                    height: 20,
                    background: "rgba(255, 255, 255, 0.1)",
                    borderRadius: 999,
                    padding: 2
                }, children: _jsx("div", { style: {
                        width: 16,
                        height: 16,
                        background: "rgba(255, 255, 255, 0.5)",
                        borderRadius: 999,
                        left: on ? "calc(100% - 16px)" : 0,
                        transition: "all 100ms"
                    } }) }), label] }));
};
export default Switch;
//# sourceMappingURL=Switch.js.map