1
Fork 0
tildes-reextended/source/options/components/index.ts

54 lines
1.4 KiB
TypeScript

import {Component} from 'preact';
import {useContext} from 'preact/hooks';
import {html} from 'htm/preact';
import {AppContext} from '../context.js';
export type SettingProps = {
children: TRXComponent | undefined;
class: string;
enabled: boolean;
feature: string;
title: string;
};
class Header extends Component<SettingProps> {
render() {
const {props} = this;
const context = useContext(AppContext);
const enabled = props.enabled ? 'Enabled' : 'Disabled';
return html`
<header>
<h2>${props.title}</h2>
<button
onClick="${() => {
context.toggleFeature(props.feature);
}}"
>
${enabled}
</button>
</header>
`;
}
}
// A base component for all the settings, this adds the header and the
// enable/disable buttons. This can also be used as a placeholder for new
// settings when you're still developing them.
export function Setting(props: SettingProps): TRXComponent {
const children =
props.children === undefined
? html`<p class="info">This setting still needs a component!</p>`
: props.children;
const enabled = (props.enabled ? 'Enabled' : 'Disabled').toLowerCase();
return html`
<section class="setting ${props.class} ${enabled}">
<${Header} ...${props} />
<div class="content">${children}</div>
</section>
`;
}