<${Button} title="Sign In" icon=${Icons.logout} onclick=${onsubmit} cls="flex w-full justify-center" />
/>
${tipText}/>
/>
/>`;
};
export function Colored({icon, text, colors}) {
return html`
${icon && html`<${icon} class="w-5 h-5" />`}
${text}/>
/>`;
};
export function Stat({title, text, tipText, tipIcon, tipColors}) {
return html`
${title}
/>
${text}
/>
<${Colored} text=${tipText} icon=${tipIcon} colors=${tipColors} />
/>
/>
/>
/>`;
};
export function TextValue({value, setfn, disabled, placeholder, type, addonRight, addonLeft, attr}) {
const f = type == 'number' ? x => setfn(parseInt(x)) : setfn;
return html`
${ addonLeft && html`
${addonLeft}>` }
f(ev.target.value)} ...${attr}
class="font-normal text-sm rounded w-full flex-1 py-0.5 px-2 text-gray-700 placeholder:text-gray-400 focus:outline-none disabled:cursor-not-allowed disabled:bg-gray-100 disabled:text-gray-500" placeholder=${placeholder} value=${value} />
${ addonRight && html`${addonRight}>` }
/>`;
};
export function SelectValue({value, setfn, options, disabled}) {
const toInt = x => x == parseInt(x) ? parseInt(x) : x;
const onchange = ev => setfn(toInt(ev.target.value));
return html`