phx-react
Version:
PHX REACT
15 lines • 1.4 kB
JavaScript
import React from 'react';
import PHXTooltip from '../ToolTip/ToolTip';
export default function PHXToggle({ onChange, active, disabled = false, helpText }) {
const toggle = (React.createElement("label", { className: `ml-2 inline-flex items-center ${disabled ? 'cursor-not-allowed opacity-60' : 'cursor-pointer'}` },
React.createElement("input", { "aria-label": 'Toggle option', checked: active, className: 'peer absolute hidden', disabled: disabled, onChange: () => {
if (!disabled)
onChange(!active);
}, type: 'checkbox' }),
React.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.createElement(PHXTooltip, { content: helpText, placement: 'top' }, toggle));
}
return toggle;
}
//# sourceMappingURL=Toggle.js.map