introduce tailwind

This commit is contained in:
Michael Dausmann
2023-04-20 22:13:41 +10:00
parent 8b2348f6a3
commit 857ab9f235
9 changed files with 4464 additions and 317 deletions

View File

@@ -19,9 +19,22 @@
});
</script>
<template>
<div>
<h3>Notes Dashboard</h3>
<p v-for="note in notes">{{ note.note_text }} <button @click.prevent="notesStore.deleteNote(note.id)">-</button></p>
<p><input v-model="newNoteText"/><button @click.prevent="addNote()">Add</button></p>
<div class="flex flex-col">
<h1 class="text-primary text-2xl">Notes Dashboard</h1>
<div class="flex flex-wrap">
<div class="card w-96 bg-base-100 shadow-xl" v-for="note in notes">
<div class="card-body">
<p>{{ note.note_text }}</p>
<div class="card-actions justify-end">
<button class="btn btn-primary btn-sm" @click.prevent="notesStore.deleteNote(note.id)">Delete</button>
</div>
</div>
</div>
</div>
<div class="p-500">
<input type="text" class="input w-full max-w-xs" placeholder="Enter a Note" v-model="newNoteText"/>
<button @click.prevent="addNote()" class="btn btn-primary">Add</button>
</div>
</div>
</template>