1
Fork 0

Add the settings page with the theme selector (#3).

This commit is contained in:
Bauke 2022-01-15 20:31:51 +01:00
parent 25c45d9d01
commit bc02927d8b
Signed by: Bauke
GPG Key ID: C1C0F29952BCF558
4 changed files with 84 additions and 0 deletions

View File

@ -0,0 +1,15 @@
.settings-page {
padding: 1rem;
.setting {
background-color: var(--background-2);
margin-top: 1rem;
max-width: 70rem;
padding: 1rem;
h2,
select {
margin-bottom: 1rem;
}
}
}

View File

@ -12,3 +12,4 @@
@use 'pages/home'; @use 'pages/home';
@use 'pages/not-found'; @use 'pages/not-found';
@use 'pages/release'; @use 'pages/release';
@use 'pages/settings';

View File

@ -0,0 +1,66 @@
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} />
</div>
`;
}
}

View File

@ -9,6 +9,7 @@ import {Router} from 'preact-router';
import HomePage from './pages/home.js'; import HomePage from './pages/home.js';
import NotFoundPage from './pages/not-found.js'; import NotFoundPage from './pages/not-found.js';
import ReleasePage from './pages/release.js'; import ReleasePage from './pages/release.js';
import SettingsPage from './pages/settings.js';
import {getThemeByCssClass, themeContext} from './utilities/themes.js'; import {getThemeByCssClass, themeContext} from './utilities/themes.js';
const activeTheme = getThemeByCssClass( const activeTheme = getThemeByCssClass(
@ -22,6 +23,7 @@ render(
<${themeContext.Provider} value=${activeTheme}> <${themeContext.Provider} value=${activeTheme}>
<${Router}> <${Router}>
<${HomePage} path="/" /> <${HomePage} path="/" />
<${SettingsPage} path="/settings" />
<${ReleasePage} path="/release/:mbid" /> <${ReleasePage} path="/release/:mbid" />
<${NotFoundPage} default /> <${NotFoundPage} default />
<//> <//>