✨ (card) make the buttons work

src/views/SpacedRepetitionCard.vue

@@ -1,3 +1,23 @@
+<script lang="ts" setup>
+import FluxNote from '@/components/FluxNote.vue'
+import FlipCard from '@/modules/card/components/FlipCard.vue'
+import { useSpacedRepetitionCards } from '@/modules/card/hooks/useSpacedRepetitionCards'
+import { computed } from 'vue'
+
+defineProps<{
+  user: string
+  repo: string
+}>()
+
+const { cards, isLoading, successRepetition, failRepetition } =
+  useSpacedRepetitionCards()
+
+const firstCard = computed(() => {
+  const [repetitionCard] = cards.value
+  return repetitionCard
+})
+</script>
+
 <template>
   <div class="spaced-repetition-card repo-note">
     <flux-note
@@ -6,45 +26,20 @@
       :repo="repo"
       :with-content="false"
     >
-      <section v-if="firstCard">
+      <section v-if="isLoading">Loading...</section>
+      <section v-else-if="firstCard">
         <h3 class="subtitle is-3">Level: {{ firstCard.repetition.level }}</h3>
-        <flip-card :card="firstCard.card" />
+        <flip-card
+          :card="firstCard.card"
+          @success="() => successRepetition(firstCard.repetition._id ?? '')"
+          @fail="() => failRepetition(firstCard.repetition._id ?? '')"
+        />
       </section>
       <section v-else>No cards to review!</section>
     </flux-note>
   </div>
 </template>
 
-<script lang="ts">
-import { useSpacedRepetitionCards } from '@/modules/card/hooks/useSpacedRepetitionCards'
-import { computed, defineComponent } from 'vue'
-import FluxNote from '@/components/FluxNote.vue'
-import FlipCard from '@/modules/card/components/FlipCard.vue'
-
-export default defineComponent({
-  name: 'SpacedRepetitionCard',
-  components: {
-    FluxNote,
-    FlipCard
-  },
-  props: {
-    user: { type: String, required: true },
-    repo: { type: String, required: true }
-  },
-  setup() {
-    const { cards } = useSpacedRepetitionCards()
-    const firstCard = computed(() => {
-      const [repetitionCard] = cards.value
-      return repetitionCard
-    })
-
-    return {
-      firstCard
-    }
-  }
-})
-</script>
-
 <style scoped lang="scss">
 .spaced-repetition-card {
   display: flex;