60 lines
1.2 KiB
Svelte
60 lines
1.2 KiB
Svelte
<script>
|
|
import MainInput from './lib/MainInput.svelte'
|
|
import NoteList from './lib/NoteList.svelte'
|
|
import Storage from './storage'
|
|
|
|
const storage = new Storage()
|
|
let notes = storage.getNotes()
|
|
|
|
function handleNewNote(e) {
|
|
console.log(e)
|
|
notes.push({
|
|
title: e.detail,
|
|
tags: ["one", "two"],
|
|
done: false
|
|
})
|
|
notes = notes // Trigger reactiveness
|
|
|
|
storage.saveNotes(notes)
|
|
}
|
|
|
|
function handleToggleNote(e) {
|
|
storage.saveNotes(notes)
|
|
}
|
|
</script>
|
|
|
|
<main>
|
|
<MainInput on:added={handleNewNote} />
|
|
<NoteList notes={notes} on:toggle={handleToggleNote} />
|
|
</main>
|
|
|
|
<style>
|
|
:root {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
|
|
Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
|
|
|
--gray-50: #F8FAFC;
|
|
--gray-100: #F1F5F9;
|
|
--gray-200: #E2E8F0;
|
|
--gray-300: #CBD5E1;
|
|
--gray-400: #94A3B8;
|
|
--gray-500: #64748B;
|
|
--gray-600: #475569;
|
|
--gray-700: #334155;
|
|
--gray-800: #1E293B;
|
|
--gray-900: #0F172A;
|
|
}
|
|
|
|
:global(body) {
|
|
padding: 0;
|
|
margin: 0;
|
|
background: var(--gray-100);
|
|
}
|
|
|
|
main {
|
|
padding: 3rem;
|
|
max-width: 50rem;
|
|
margin: 0 auto;
|
|
}
|
|
</style>
|