64 lines
977 B
Svelte
64 lines
977 B
Svelte
<script>
|
|
import { createEventDispatcher } from 'svelte'
|
|
const dispatch = createEventDispatcher()
|
|
|
|
export let note = {}
|
|
|
|
function toggle(e) {
|
|
dispatch('toggle', note.title)
|
|
}
|
|
</script>
|
|
|
|
<article class="note flex" class:done={note.done} class:todo={!note.done}>
|
|
|
|
<aside class="check">
|
|
<input
|
|
type="checkbox"
|
|
bind:checked={note.done}
|
|
on:change={toggle} />
|
|
</aside>
|
|
|
|
<div class="title">
|
|
{note.title}
|
|
</div>
|
|
|
|
<aside class="tags">
|
|
{#each note.tags as tag}
|
|
<a href="#">#{tag}</a>
|
|
{/each}
|
|
</aside>
|
|
|
|
</article>
|
|
|
|
<style>
|
|
article.note {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
|
|
padding: 0.5rem;
|
|
background: white;
|
|
border: 1px solid var(--gray-400);
|
|
border-radius: 0.15rem;
|
|
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
article.done {
|
|
text-decoration: line-through;
|
|
background: var(--gray-200);
|
|
color: var(--gray-500);
|
|
}
|
|
|
|
article.done a {
|
|
color: var(--gray-500);
|
|
}
|
|
|
|
.tags {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.title {
|
|
flex: 1;
|
|
}
|
|
</style> |