Rune Harlyk
77 lines
2.2 KiB
Svelte
77 lines
2.2 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
|
|
right?: import('svelte').Snippet
|
|
}
|
|
|
|
let {
|
|
open = $bindable(true),
|
|
collapsible = true,
|
|
icon,
|
|
title,
|
|
children,
|
|
right
|
|
}: 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 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>
|
|
{@render right?.()}
|
|
</div>
|
|
<div class="flex flex-col gap-2 p-4 pt-0">
|
|
{@render children?.()}
|
|
</div>
|
|
</div>
|
|
{/if}
|