this repo has no description
lewis.moe
1<script lang="ts">
2 import type { Snippet } from 'svelte'
3 import type { HTMLAttributes } from 'svelte/elements'
4
5 interface Props extends HTMLAttributes<HTMLDivElement> {
6 variant?: 'default' | 'interactive' | 'danger'
7 padding?: 'none' | 'sm' | 'md' | 'lg'
8 children: Snippet
9 }
10
11 let {
12 variant = 'default',
13 padding = 'md',
14 children,
15 ...rest
16 }: Props = $props()
17</script>
18
19<div class="card card-{variant} padding-{padding}" {...rest}>
20 {@render children()}
21</div>
22
23<style>
24 .card {
25 background: var(--bg-card);
26 border: 1px solid var(--border-color);
27 border-radius: var(--radius-xl);
28 }
29
30 .card-interactive {
31 cursor: pointer;
32 transition: border-color var(--transition-normal), box-shadow var(--transition-normal);
33 }
34
35 .card-interactive:hover {
36 border-color: var(--accent);
37 box-shadow: 0 2px 8px var(--accent-muted);
38 }
39
40 .card-danger {
41 background: var(--error-bg);
42 border-color: var(--error-border);
43 }
44
45 .padding-none { padding: 0; }
46 .padding-sm { padding: var(--space-4); }
47 .padding-md { padding: var(--space-6); }
48 .padding-lg { padding: var(--space-7); }
49</style>