forked from mirror/crumbs-original
Frederic CabassutandClaude Opus 4.6
eb18242f5a
Replace hardcoded colors (gray-500, #b44, red-300/red-50/red-600, green-600) with CSS variables for theme consistency. Add --destructive, --error-*, --success-*, and --card-shadow variables to :root. Soften default card borders from --border to --border-subtle and add 8-bit style hard-offset shadows with hover effects. Apply accent-color for themed checkboxes. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
24 lines
615 B
Svelte
24 lines
615 B
Svelte
<script lang="ts">
|
|
import NoteCard from './NoteCard.svelte';
|
|
import type { Note } from '$lib/types/index.js';
|
|
|
|
interface Props {
|
|
notes: Note[];
|
|
label?: string;
|
|
onEdit: (note: Note) => void;
|
|
}
|
|
|
|
let { notes, label = '', onEdit }: Props = $props();
|
|
</script>
|
|
|
|
{#if notes.length > 0}
|
|
{#if label}
|
|
<p class="mb-2 px-2 text-xs font-semibold uppercase tracking-wider text-[var(--text-muted)]">{label}</p>
|
|
{/if}
|
|
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4" data-testid="note-grid">
|
|
{#each notes as note (note.id)}
|
|
<NoteCard {note} {onEdit} />
|
|
{/each}
|
|
</div>
|
|
{/if}
|