35 lines
957 B
JavaScript
35 lines
957 B
JavaScript
|
import { h, render } from 'https://esm.sh/preact@10';
|
||
|
|
import { useState } from 'https://esm.sh/preact@10/hooks';
|
||
|
|
import { html } from 'https://esm.sh/htm@3/preact';
|
||
|
|
|
||
|
|
function Toggle({ label = 'Toggle' }) {
|
||
|
|
const [checked, setChecked] = useState(false);
|
||
|
|
|
||
|
|
return html`
|
||
|
|
<button
|
||
|
|
onClick=${() => {
|
||
|
|
setChecked(c => !c)
|
||
|
|
}}
|
||
|
|
aria-pressed=${checked}
|
||
|
|
class=${`flex items-center gap-2 px-4 py-2 rounded-full border-2 border-[#306f8e] text-sm font-medium cursor-pointer transition-colors ${
|
||
|
|
checked ? 'bg-[#306f8e] text-white' : 'bg-transparent text-[#306f8e]'
|
||
|
|
}`}
|
||
|
|
>
|
||
|
|
<span class="w-3 h-3 rounded-full bg-current"></span>
|
||
|
|
${label}
|
||
|
|
</button>
|
||
|
|
`;
|
||
|
|
}
|
||
|
|
|
||
|
|
class RptToggle extends HTMLElement {
|
||
|
|
connectedCallback() {
|
||
|
|
render(html`<${Toggle} label=${this.getAttribute('label')} />`, this);
|
||
|
|
}
|
||
|
|
|
||
|
|
disconnectedCallback() {
|
||
|
|
render(null, this);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
customElements.define('rpt-toggle', RptToggle);
|