43 lines
1.0 KiB
Svelte
43 lines
1.0 KiB
Svelte
<script lang="ts">
|
|
import { playAudio } from '$lib/stores';
|
|
import { get } from 'svelte/store';
|
|
import { IconOutline } from 'svelte-heros-v2';
|
|
|
|
let settings = [
|
|
{
|
|
name: 'Sound abspielen',
|
|
description:
|
|
'Manche Elemente können Sounds abspielen. Aktiviere diese Option und finde raus welche',
|
|
store: playAudio
|
|
}
|
|
];
|
|
</script>
|
|
|
|
<div>
|
|
<h2 class="text-2xl">Einstellungen</h2>
|
|
<div>
|
|
<div class="divider" />
|
|
<div class="grid grid-cols-2">
|
|
{#each settings as setting}
|
|
<div class="flex">
|
|
<p>{setting.name}</p>
|
|
<span class="tooltip ml-[0.2rem] -mt-[1px]" data-tip={setting.description}>
|
|
<IconOutline name="question-mark-circle-outline" width="16" height="16" />
|
|
</span>
|
|
</div>
|
|
<input
|
|
type="checkbox"
|
|
class="toggle justify-self-end mr-6"
|
|
checked={get(setting.store)}
|
|
on:change={(e) => {
|
|
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
// @ts-ignore
|
|
setting.store.set(e.target.checked);
|
|
}}
|
|
/>
|
|
{/each}
|
|
</div>
|
|
<div class="divider" />
|
|
</div>
|
|
</div>
|