JCEEE
86 lines
1.7 KiB
Svelte
86 lines
1.7 KiB
Svelte
<script lang="ts">
|
|
import type { Snippet } from 'svelte';
|
|
import ChevronDown from '@lucide/svelte/icons/chevron-down';
|
|
|
|
let {
|
|
title,
|
|
icon,
|
|
open = $bindable(false),
|
|
children
|
|
}: { title: string; icon?: Snippet; open?: boolean; children: Snippet } = $props();
|
|
</script>
|
|
|
|
<div class="accordion-item" class:open>
|
|
<button class="accordion-trigger" onclick={() => (open = !open)} aria-expanded={open}>
|
|
<span class="accordion-title">
|
|
{#if icon}
|
|
<span class="accordion-icon">{@render icon()}</span>
|
|
{/if}
|
|
<span>{title}</span>
|
|
</span>
|
|
<span class="accordion-arrow" class:rotated={open}><ChevronDown /></span>
|
|
</button>
|
|
{#if open}
|
|
<div class="accordion-body">
|
|
{@render children()}
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
|
|
<style>
|
|
.accordion-item {
|
|
border-bottom: 1px solid #f3f4f6;
|
|
}
|
|
.accordion-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
.accordion-trigger {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
width: 100%;
|
|
padding: 0.7rem 1rem;
|
|
background: #fafafa;
|
|
border: none;
|
|
font-size: 0.95rem;
|
|
font-weight: 600;
|
|
color: #374151;
|
|
cursor: pointer;
|
|
text-align: left;
|
|
}
|
|
.accordion-trigger:hover {
|
|
background: #f3f4f6;
|
|
}
|
|
.accordion-title {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
}
|
|
.accordion-icon {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
color: #6366f1;
|
|
}
|
|
.accordion-icon :global(svg) {
|
|
width: 1.05em;
|
|
height: 1.05em;
|
|
}
|
|
.accordion-arrow {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
color: #9ca3af;
|
|
transition: transform 0.15s ease;
|
|
transform: rotate(-90deg);
|
|
}
|
|
.accordion-arrow.rotated {
|
|
transform: rotate(0deg);
|
|
}
|
|
.accordion-arrow :global(svg) {
|
|
width: 1.1em;
|
|
height: 1.1em;
|
|
}
|
|
.accordion-body {
|
|
padding: 1rem;
|
|
}
|
|
</style>
|