1
Fork 0
href-plus/source/ts/pages/settings.ts

67 lines
1.6 KiB
TypeScript
Raw Normal View History

import {Component, html} from 'htm/preact';
import ExternalAnchor from '../components/external-anchor.js';
import SharedFooter from '../components/shared-footer.js';
import {getThemeByCssClass, setTheme, themes} from '../utilities/themes.js';
type Props = Record<string, unknown>;
type State = {
selectedTheme: string;
};
export default class SettingsPage extends Component<Props, State> {
constructor(props: Props) {
super(props);
this.state = {
selectedTheme: window.localStorage.getItem('theme') ?? themes[0].cssClass,
};
}
onThemeChange = (event: Event) => {
const theme = getThemeByCssClass((event.target as HTMLSelectElement).value);
setTheme(theme);
this.setState({selectedTheme: theme.cssClass});
};
render() {
document.title = 'Settings';
const {selectedTheme} = this.state;
const themeOptions = themes.map(
(theme) => html`<option value=${theme.cssClass}>${theme.name}</option>`,
);
const moreThemesLink = html`
<${ExternalAnchor}
text="more themes issue"
url="https://github.com/Bauke/href-plus/issues/17"
/>
`;
return html`
<div class="settings-page">
<header>
<h1>Settings</h1>
</header>
<section class="setting">
<h2>Theme</h2>
<select value=${selectedTheme} onChange=${this.onThemeChange}>
${themeOptions}
</select>
<p>
If your favorite theme isn't in the list here, please make a request
for it in the ${moreThemesLink}!
</p>
</section>
<${SharedFooter} page="settings" />
</div>
`;
}
}