<script lang="ts">
import type { Snippet } from "svelte";
let {
title,
description = "",
children,
}: {
title: string;
description?: string;
children: Snippet;
} = $props();
</script>
<section class="settings-section">
<div class="section-header">
<h3 class="section-title">{title}</h3>
{#if description}
<p class="section-desc">{description}</p>
{/if}
</div>
<div class="section-body">
{@render children()}
</div>
</section>
<style>
.settings-section {
border: 1px solid var(--vscode-panel-border);
border-radius: var(--wsb-radius-lg);
background: var(--vscode-sideBar-background);
overflow: hidden;
}
.section-header {
padding: var(--wb-spacing-14) var(--wb-spacing-18) var(--wb-spacing-10);
border-bottom: 1px solid var(--vscode-widget-border);
}
.section-title {
font-size: var(--wb-font-size-13);
font-weight: 600;
color: var(--vscode-editor-foreground);
margin: 0;
}
.section-desc {
font-size: var(--wb-font-size-11);
color: var(--vscode-disabledForeground);
margin: var(--wb-spacing-4) 0 0;
}
.section-body {
padding: var(--wb-spacing-14) var(--wb-spacing-18);
display: flex;
flex-direction: column;
gap: var(--wb-spacing-12);
}
</style>