this repo has no description
lewis.moe
1<script lang="ts">
2 import type { Snippet } from 'svelte'
3
4 interface Props {
5 variant: 'success' | 'error' | 'warning' | 'info'
6 children: Snippet
7 }
8
9 let { variant, children }: Props = $props()
10</script>
11
12<div class="message message-{variant}">
13 {@render children()}
14</div>
15
16<style>
17 .message {
18 padding: var(--space-4);
19 border-radius: var(--radius-md);
20 font-size: var(--text-sm);
21 }
22
23 .message-success {
24 background: var(--success-bg);
25 border: 1px solid var(--success-border);
26 color: var(--success-text);
27 }
28
29 .message-error {
30 background: var(--error-bg);
31 border: 1px solid var(--error-border);
32 color: var(--error-text);
33 }
34
35 .message-warning {
36 background: var(--warning-bg);
37 border: 1px solid var(--warning-border);
38 color: var(--warning-text);
39 }
40
41 .message-info {
42 background: var(--accent-muted);
43 border: 1px solid var(--accent);
44 color: var(--text-primary);
45 }
46</style>