40 lines
1.1 KiB
Svelte
40 lines
1.1 KiB
Svelte
<script lang="ts">
|
|
import type { language } from "src/lang";
|
|
import Help from "../Others/Help.svelte";
|
|
|
|
export let name = ""
|
|
let open = false
|
|
export let styled = false
|
|
export let help: (keyof (typeof language.help))|'' = ''
|
|
|
|
</script>
|
|
|
|
{#if styled}
|
|
<div class="flex flex-col mt-2">
|
|
<button class="hover:bg-selected px-6 py-2 text-lg rounded-t-md border-selected border"
|
|
class:bg-selected={open}
|
|
class:rounded-b-md={!open}
|
|
on:click={() => {
|
|
open = !open
|
|
}}
|
|
>{name}{#if help}
|
|
<Help key={help} />
|
|
{/if}</button>
|
|
{#if open}
|
|
<div class="flex flex-col border border-selected p-2 rounded-b-md">
|
|
<slot></slot>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
{:else}
|
|
<div class="flex flex-col">
|
|
<button class="hover:bg-selected px-6 py-2 text-lg" class:bg-selected={open} on:click={() => {
|
|
open = !open
|
|
}}>{name}</button>
|
|
{#if open}
|
|
<div class="flex flex-col bg-darkbg">
|
|
<slot></slot>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
{/if} |