Add simple statistics view

src/stores/stat.ts

@@ -0,0 +1,22 @@
+import api from '@/lib/api'
+import { defineStore } from 'pinia'
+
+export const useStatStore = defineStore('stat', {
+    state: () => {
+        return {
+            allWords: 0,
+            knownWords: 0,
+        }
+    },
+    getters: {
+        getAllWords: (state) => state.allWords,
+        getKnownWords: (state) => state.knownWords,
+    },
+    actions: {
+        async fetchStats() {
+            const stats = await api.get('stats')
+            this.allWords = stats.all
+            this.knownWords = stats.known
+        }
+    }
+})

src/views/Stats.vue

@@ -1,8 +1,35 @@
 <script setup lang="ts">
+  import { useStatStore } from '@/stores/stat'
+  import { storeToRefs } from 'pinia';
+
+  const statStore = useStatStore()
+  statStore.fetchStats()
+
+  const { getAllWords, getKnownWords } = storeToRefs(statStore)
 </script>
 
 <template>
-  <h2>Stats</h2>
+  <div class="container mx-auto mt-16">
+
+    <div class="text-center">
+      <v-icon size="small" icon="mdi-poll"/>
+      <h2 class="text-h4 mb-5">  
+        Statistics
+      </h2>
+    </div>
+
+
+    <div>You have <b>{{ getAllWords }}</b> words in your library</div>
+
+    <div>You have learned <b>{{ getKnownWords }}</b> words</div> 
+  </div>
 </template>
 
+<style scoped lang="scss">
+.container {
+  width: 450px;
+  padding: 3em;
+  border: $light-border;
+}
+</style>