Files
flotilla/src/lib/components/Collapse.svelte
T
2024-10-08 11:39:16 -07:00

28 lines
589 B
Svelte

<script lang="ts">
import {slide} from "@lib/transition"
import Icon from "@lib/components/Icon.svelte"
const toggle = () => {
isOpen = !isOpen
}
let isOpen = false
</script>
<div class="relative flex flex-col gap-4 {$$props.class}">
<button
type="button"
class="absolute right-8 top-8 h-4 w-4 cursor-pointer transition-all"
class:rotate-90={!isOpen}
on:click={toggle}>
<Icon icon="alt-arrow-down" />
</button>
<slot name="title" />
<slot name="description" />
{#if isOpen}
<div transition:slide>
<slot />
</div>
{/if}
</div>