mirror of
https://github.com/chinchang/web-maker.git
synced 2025-07-26 08:11:17 +02:00
42 lines
793 B
JavaScript
42 lines
793 B
JavaScript
export default function Switch({
|
|
checked,
|
|
onChange,
|
|
labels = [],
|
|
children,
|
|
showBothLabels
|
|
}) {
|
|
return (
|
|
<label class="check-switch">
|
|
<input
|
|
role="switch"
|
|
type="checkbox"
|
|
checked={checked}
|
|
onChange={onChange}
|
|
/>
|
|
<div class="check-switch__toggle-wrap">
|
|
<span
|
|
aria-hidden="true"
|
|
class="check-switch__status"
|
|
style={`visibility:${
|
|
checked && !showBothLabels ? 'hidden' : 'visible'
|
|
}`}
|
|
>
|
|
{labels[0] || 'Off'}
|
|
</span>
|
|
<span aria-hidden="true" class="check-switch__toggle" />
|
|
<span
|
|
aria-hidden="true"
|
|
class="check-switch__status"
|
|
style={`visibility:${
|
|
checked || showBothLabels ? 'visible' : 'hidden'
|
|
}`}
|
|
>
|
|
{labels[1] || 'On'}
|
|
</span>
|
|
</div>
|
|
|
|
{children}
|
|
</label>
|
|
);
|
|
}
|