character rules

src/pages/rules/ListRuleBooks.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import {storeToRefs} from "pinia";
+import {CharacterLabel, useCharactersStore} from "@/characters";
+import {PencilSquareIcon} from "@heroicons/vue/24/outline";
+
+const {characters} = storeToRefs(useCharactersStore());
+
+</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>
+  </div>
+</template>