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 + .section {
37 margin-top: var(--space-6);
38 }
39
40 .section-danger {
41 background: var(--error-bg);
42 border: 1px solid var(--error-border);
43 }
44
45 .section-danger h2 {
46 color: var(--error-text);
47 }
48
49 h2 {
50 margin: 0 0 var(--space-3) 0;
51 font-size: var(--text-lg);
52 }
53
54 .description {
55 color: var(--text-secondary);
56 font-size: var(--text-sm);
57 margin-bottom: var(--space-5);
58 }
59</style>