rule book front

src/pages/rules/ListRuleBooks.vue

@@ -1,17 +1,21 @@
 <script setup lang="ts">
 import {storeToRefs} from "pinia";
-import {CharacterLabel, useCharactersStore} from "@/characters";
-import {PencilSquareIcon} from "@heroicons/vue/24/outline";
+import {PencilSquareIcon, TrashIcon} from "@heroicons/vue/24/outline";
+import {useRuleBooksStore} from "@/rules";
 
-const {characters} = storeToRefs(useCharactersStore());
+const {ruleBooks} = storeToRefs(useRuleBooksStore());
 
 </script>
 
 <template>
   <div class="grid mb-2 mt-4">
-    <div v-for="character in characters" :key="character.characterId" class="flex items-center mb-2">
-      <CharacterLabel class="flex grow" :character="character" />
-      <RouterLink class="btn-icon ms-2" :to="{ name: 'character-rulebook', params: { characterId: character.characterId } }"><PencilSquareIcon /></RouterLink>
+    <div class="flex justify-end border-b-1">
+      <RouterLink class="button mb-2 ms-2" :to="{ name: 'new-rule-book'}">New Rule Book</RouterLink>
+    </div>
+    <div v-for="ruleBook in ruleBooks" :key="ruleBook.ruleBookId" class="flex items-center mt-2">
+      <span class="flex grow me-2">{{ruleBook.name}}</span>
+      <RouterLink class="btn-icon me-1" :to="{ name: 'edit-rule-book', params: { ruleBookId: ruleBook.ruleBookId } }"><PencilSquareIcon /></RouterLink>
+      <button class="btn-icon"><TrashIcon /></button>
     </div>
   </div>
 </template>