this repo has no description
lewis.moe
1<script lang="ts">
2 import type { Snippet } from 'svelte'
3
4 interface Props {
5 title?: string
6 description?: string
7 variant?: 'default' | 'danger'
8 children: Snippet
9 }
10
11 let {
12 title,
13 description,
14 variant = 'default',
15 children
16 }: Props = $props()
17</script>
18
19<section class="section section-{variant}">
20 {#if title}
21 <h2>{title}</h2>
22 {/if}
23 {#if description}
24 <p class="description">{description}</p>
25 {/if}
26 {@render children()}
27</section>
28
29<style>
30 .section {
31 background: var(--bg-secondary);
32 border-radius: var(--radius-xl);
33 padding: var(--space-6);
34 }
35
36 .section-danger {
37 background: var(--error-bg);
38 border: 1px solid var(--error-border);
39 }
40
41 .section-danger h2 {
42 color: var(--error-text);
43 }
44
45 h2 {
46 margin: 0 0 var(--space-3) 0;
47 font-size: var(--text-lg);
48 }
49
50 .description {
51 color: var(--text-secondary);
52 font-size: var(--text-sm);
53 margin-bottom: var(--space-5);
54 }
55</style>