Rune Harlyk
70 lines
1.6 KiB
Svelte
70 lines
1.6 KiB
Svelte
<script lang="ts">
|
|
import { slide } from 'svelte/transition';
|
|
import { cubicOut } from 'svelte/easing';
|
|
import { Down } from './icons';
|
|
interface Props {
|
|
open?: boolean;
|
|
collapsible?: boolean;
|
|
icon?: import('svelte').Snippet;
|
|
title?: import('svelte').Snippet;
|
|
children?: import('svelte').Snippet;
|
|
}
|
|
|
|
let {
|
|
open = $bindable(true),
|
|
collapsible = true,
|
|
icon,
|
|
title,
|
|
children
|
|
}: Props = $props();
|
|
</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">
|
|
{@render icon?.()}
|
|
{@render title?.()}
|
|
</span>
|
|
<button
|
|
class="btn btn-circle btn-ghost btn-sm"
|
|
onclick={() => {
|
|
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 }}
|
|
>
|
|
{@render children?.()}
|
|
</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">
|
|
{@render icon?.()}
|
|
{@render title?.()}
|
|
</span>
|
|
</div>
|
|
<div class="flex flex-col gap-2 p-4 pt-0">
|
|
{@render children?.()}
|
|
</div>
|
|
</div>
|
|
{/if}
|