integrate need review cards

src/views/NeedReviewCards.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import FluxNote from '@/components/FluxNote.vue'
+import { DataType } from '@/data/DataType.enum'
+import { useNeedReviewCards } from '@/modules/card/hooks/useNeedReviewCards'
+import { computed } from 'vue'
+
+defineProps<{
+  user: string
+  repo: string
+}>()
+
+const { cardsToReview } = useNeedReviewCards()
+const cardNames = computed(() =>
+  cardsToReview.value.map((card) => ({
+    id: card._id,
+    name: card._id?.split(DataType.RepetitionCard).pop()
+  }))
+)
+</script>
+
+<template>
+  <div class="needs-review-cards">
+    <flux-note
+      key="needs-review-cards"
+      class="card-container"
+      :user="user"
+      :repo="repo"
+      :with-content="false"
+    >
+      needs review cards
+      <ul>
+        <li v-for="card in cardNames" :key="card.id">
+          {{ card.name }}
+        </li>
+      </ul>
+    </flux-note>
+  </div>
+</template>

src/views/SpacedRepetitionCard.vue

@@ -8,7 +8,7 @@ defineProps<{
   repo: string
 }>()
 
-const { cards, isLoading, successRepetition, failRepetition } =
+const { cards, isLoading, successRepetition, failRepetition, needsReview } =
   useSpacedRepetitionCards()
 </script>
 
@@ -27,9 +27,13 @@ const { cards, isLoading, successRepetition, failRepetition } =
           :cards="cards"
           @success="successRepetition"
           @fail="failRepetition"
+          @needs-review="needsReview"
         />
       </section>
       <section v-else>No cards to review!</section>
+      <router-link :to="{ name: 'NeedReviewCards', params: { user, repo } }">
+        needs review cards
+      </router-link>
     </flux-note>
   </div>
 </template>