Rune Harlyk
57 lines
1.3 KiB
Svelte
57 lines
1.3 KiB
Svelte
<script lang="ts">
|
|
import { slide } from 'svelte/transition';
|
|
import { cubicOut } from 'svelte/easing';
|
|
import { Down } from './icons';
|
|
export let open = true;
|
|
export let collapsible = true;
|
|
</script>
|
|
|
|
{#if collapsible}
|
|
<div
|
|
class="bg-base-200 rounded-box relative grid w-full max-w-2xl self-center overflow-hidden shadow-lg"
|
|
>
|
|
<div
|
|
class="min-h-16 flex w-full items-center justify-between space-x-3 p-4 text-xl font-medium"
|
|
>
|
|
<span class="inline-flex items-baseline">
|
|
<slot name="icon" />
|
|
<slot name="title" />
|
|
</span>
|
|
<button
|
|
class="btn btn-circle btn-ghost btn-sm"
|
|
on:click={() => {
|
|
open = !open;
|
|
}}
|
|
>
|
|
<Down
|
|
class="text-base-content h-auto w-6 transition-transform duration-300 ease-in-out {open
|
|
? 'rotate-180'
|
|
: ''}"
|
|
/>
|
|
</button>
|
|
</div>
|
|
{#if open}
|
|
<div
|
|
class="flex flex-col gap-2 p-4 pt-0"
|
|
transition:slide|local={{ duration: 300, easing: cubicOut }}
|
|
>
|
|
<slot />
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
{:else}
|
|
<div
|
|
class="bg-base-200 rounded-box relative grid w-full max-w-2xl self-center overflow-hidden shadow-lg"
|
|
>
|
|
<div class="min-h-16 w-full p-4 text-xl font-medium">
|
|
<span class="inline-flex items-baseline">
|
|
<slot name="icon" />
|
|
<slot name="title" />
|
|
</span>
|
|
</div>
|
|
<div class="flex flex-col gap-2 p-4 pt-0">
|
|
<slot />
|
|
</div>
|
|
</div>
|
|
{/if}
|