refactor to UI components

src/components/Note/NoteReferences.vue

@@ -5,22 +5,18 @@ const props = defineProps<{
 }>()
 </script>
 <template>
-  <div class="card mt-3 border-[1px]" v-if="props.references.length > 0">
-    <div class="card-body px-3 py-3">
-      <ul class="menu rounded-md">
-        <li class="menu-title !opacity-100">
-          <span class="card-title text-secondary">
-            References
-            <div class="badge-outline badge">{{ props.references.length }}</div>
-          </span>
-        </li>
-        <li v-for="reference in props.references" :key="reference.id">
-          <a class="rounded-md" @click="setActiveNote(reference.id)">
-            <i class="far fa-file-alt fa-fw" />
-            {{ reference.title }}
-          </a>
-        </li>
-      </ul>
-    </div>
-  </div>
+  <UIMenu class="mt-3 rounded-xl border-[1px] px-3 py-3" v-if="props.references.length > 0">
+    <UIMenuItem :title="true">
+      <span>References</span>
+      <UIBadge variant="outline">{{ props.references.length }}</UIBadge>
+    </UIMenuItem>
+    <UIMenuItem
+      v-for="reference in props.references"
+      :key="reference.id"
+      @click="setActiveNote(reference.id)"
+    >
+      <i class="far fa-file-alt fa-fw" />
+      {{ reference.title }}
+    </UIMenuItem>
+  </UIMenu>
 </template>