phx-react
Version:
PHX REACT
19 lines • 1.63 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.default = PHXToggle;
const tslib_1 = require("tslib");
const react_1 = tslib_1.__importDefault(require("react"));
const ToolTip_1 = tslib_1.__importDefault(require("../ToolTip/ToolTip"));
function PHXToggle({ onChange, active, disabled = false, helpText }) {
const toggle = (react_1.default.createElement("label", { className: `ml-2 inline-flex items-center ${disabled ? 'cursor-not-allowed opacity-60' : 'cursor-pointer'}` },
react_1.default.createElement("input", { "aria-label": 'Toggle option', checked: active, className: 'peer absolute hidden', disabled: disabled, onChange: () => {
if (!disabled)
onChange(!active);
}, type: 'checkbox' }),
react_1.default.createElement("div", { className: "\n peer relative h-5 w-8 rounded-[0.4rem] bg-slate-300 transition-colors\n after:absolute after:left-[4px] after:top-1/2 after:h-[12px]\n after:w-[12px] after:translate-y-[-50%] after:rounded-[3px]\n after:bg-white after:transition-transform\n after:content-[''] peer-checked:bg-black peer-checked:after:translate-x-3\n peer-disabled:bg-slate-200 peer-disabled:after:bg-slate-50\n peer-disabled:peer-checked:bg-slate-300\n dark:border-gray-600 dark:bg-gray-500\n " })));
if (helpText) {
return (react_1.default.createElement(ToolTip_1.default, { content: helpText, placement: 'top' }, toggle));
}
return toggle;
}
//# sourceMappingURL=Toggle.js.map