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

53 lines
1.4 KiB
TypeScript
Raw Normal View History

2023-06-23 10:52:03 +00:00
import {Component, type ComponentChildren, type JSX} from "preact";
// eslint-disable-next-line n/file-extension-in-import
import {useContext} from "preact/hooks";
import {AppContext} from "../context.js";
import {type Feature} from "../../storage/common.js";
export type SettingProps = {
children: ComponentChildren;
class: string;
enabled: boolean;
feature: Feature;
title: string;
};
class Header extends Component<SettingProps> {
render() {
const {props} = this;
const context = useContext(AppContext);
const enabled = props.enabled ? "Enabled" : "Disabled";
return (
<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): JSX.Element {
const children = props.children ?? (
<p class="info">This setting still needs a component!</p>
);
const enabled = (props.enabled ? "Enabled" : "Disabled").toLowerCase();
return (
<section class={`setting ${props.class} ${enabled}`}>
<Header {...props} />
<div class="content">{children}</div>
</section>
);
}