feat: categories count dashboard

src/components/NumberDisplay.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+const props = defineProps<{
+	label: string
+	data: number | undefined
+}>()
+</script>
+
+<template>
+	<VSkeletonLoader v-if="!props.data" width="100" height="100" type="heading" />
+
+	<VCard v-else class="d-flex align-center justify-center flex-column pa-4" variant="flat">
+		<p class="text-h4">{{ props.data }}</p>
+		<h2 class="text-subtitle-1">{{ props.label }}</h2>
+	</VCard>
+</template>

src/views/HomeView.vue

@@ -1,5 +1,22 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import NumberDisplay from '@/components/NumberDisplay.vue'
+import { useCategoriesStore } from '@/stores/categories'
+import { onMounted, ref } from 'vue'
+
+const categoriesStore = useCategoriesStore()
+
+const totalCategories = ref(undefined as number | undefined)
+
+onMounted(async () => {
+	const fetchedCategories = await categoriesStore.getCategories()
+	const response = await fetchedCategories.json()
+	totalCategories.value = response.total
+})
+</script>
 
 <template>
 	<h1 class="text-h3">Dashboard</h1>
+	<section class="d-flex align-center">
+		<NumberDisplay label="Categories" :data="totalCategories" />
+	</section>
 </template>