Files
cobalt/web/src/components/buttons/SettingsButton.svelte
wukko 61733f491a web/settings: navigation draft
also unified "active" class/state across all components & added more colors
2024-06-24 19:42:31 +06:00

33 lines
866 B
Svelte

<script
lang="ts"
generics="
Context extends Exclude<keyof CobaltSettings, 'schemaVersion'>,
Id extends keyof CobaltSettings[Context],
Value extends CobaltSettings[Context][Id]
"
>
import settings, { updateSetting } from "$lib/settings";
import type { CobaltSettings } from "$lib/types/settings";
export let settingContext: Context;
export let settingId: Id;
export let settingValue: Value;
$: setting = $settings[settingContext][settingId];
$: isActive = setting === settingValue;
</script>
<button
id="setting-button-{settingContext}-{String(settingId)}-{settingValue}"
class="button"
class:active={isActive}
on:click={() =>
updateSetting({
[settingContext]: {
[settingId]: settingValue,
},
})}
>
<slot></slot>
</button>