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
39
40
41
42
43
44
45
46
47

<script lang="ts">
  import settings, { type Settings } from '$stores/settings';

  interface Props {
    setting: keyof Settings;
    on?: string;
    off?: string;
    sectionBreak?: boolean;
    disabled?: boolean;
    children?: import('svelte').Snippet;
  }

  let {
    setting,
    on = '',
    off = '',
    sectionBreak = false,
    disabled = false,
    children
  }: Props = $props();
</script>

<a
  href={'#'}
  onclick={() =>
    disabled
      ? {}
      : $settings[setting]
      ? settings.setKey(setting, false)
      : settings.setKey(setting, true)}
>
  {#if disabled}
    <strike>
      {$settings[setting] ? on : off}
      {@render children?.()}
    </strike>
  {:else}
    {$settings[setting] ? on : off}
    {@render children?.()}
  {/if}
</a>

<br />

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