Hugging Face's logo

Spaces:
playingapi
/
cobalt
Sleeping

App Files Community
cobalt
File size: 2,042 Bytes 
43a06dc
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
 
<script
    lang="ts"
    generics="
        Context extends Exclude<keyof CobaltSettings, 'schemaVersion'>,
        Id extends keyof CobaltSettings[Context]
    "
>
    import settings, { updateSetting } from "$lib/state/settings";
    import type { CobaltSettings } from "$lib/types/settings";

    import Toggle from "$components/misc/Toggle.svelte";

    export let settingId: Id;
    export let settingContext: Context;

    export let title: string;
    export let description: string = "";

    export let disabled = false;
    export let disabledOpacity = false;

    $: setting = $settings[settingContext][settingId];
    $: isEnabled = !!setting;
</script>

<div
    id="setting-toggle-{settingContext}-{String(settingId)}"
    class="toggle-parent"
    class:disabled
    class:faded={disabledOpacity}
    aria-hidden={disabled}
>
    <button
        class="toggle-container"
        role="switch"
        aria-checked={isEnabled}
        disabled={disabled}
        on:click={() =>
            updateSetting({
                [settingContext]: {
                    [settingId]: !isEnabled,
                }
            })
        }
    >
        <h4 class="toggle-title">{title}</h4>
        <Toggle enabled={isEnabled} />
    </button>

    {#if description}
        <div class="subtext toggle-description">{description}</div>
    {/if}
</div>

<style>
    .toggle-parent {
        display: flex;
        flex-direction: column;
        gap: 8px;
        overflow: hidden;
        transition: opacity 0.2s;
    }

    .toggle-parent.disabled {
        pointer-events: none;
    }

    .toggle-parent.faded {
        opacity: 0.5;
    }

    .toggle-container {
        width: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: var(--padding);
        justify-content: space-between;
        text-align: start;
        transform: none;
        padding: calc(var(--switcher-padding) * 2) 16px;
        border-radius: var(--border-radius);
        overflow: scroll;
    }
</style>