src/lib/Settings/SettingToggle.svelte


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

<script lang="ts">
import { track } from "$lib/analytics";
import Spacer from "$lib/Layout/Spacer.svelte";
import settings, { type Settings } from "$stores/settings";

export let setting: keyof Settings;
export let on = "";
export let off = "";
export let sectionBreak = false;
export let disabled = false;

const toggle = () => {
	if (disabled) return;

	const value = !$settings[setting];

	settings.setKey(setting, value);
	track("Toggle Setting", { key: setting, value });
};
</script>

<a href={'#'} onclick={toggle}>
  {#if disabled}
    <strike>
      {$settings[setting] ? on : off}
      <slot />
    </strike>
  {:else}
    {$settings[setting] ? on : off}
    <slot />
  {/if}
</a>

<br />

{#if sectionBreak}
  <Spacer />
{/if}