UI upgrade

web/src/components/common/EnhancedPagination.vue

@@ -0,0 +1,31 @@
+<template>
+  <v-pagination
+    v-model="page"
+    :length="totalPages"
+  />
+</template>
+
+<script lang="ts">
+/**
+ * Use in conjuction with `useRouteQueryPagination` composable.
+ */
+</script>
+
+<script setup lang="ts">
+import { computed } from "vue"
+
+const page = defineModel<number>({
+  required: true,
+  default: 1,
+})
+
+const perPage = defineModel<number>("perPage", {
+  default: 10,
+})
+
+const props = defineProps<{
+  totalCount: number
+}>()
+
+const totalPages = computed(() => Math.ceil(props.totalCount / perPage.value))
+</script>

web/src/components/flashcards/FlashcardCard.vue

@@ -0,0 +1,27 @@
+<template>
+  <v-card class="pa-5">
+    <div
+      class="face-content text-h5 text-center"
+      v-html="renderMarkdown(flashcard.front)"
+    />
+  </v-card>
+</template>
+
+<script setup lang="ts">
+import { type Flashcard } from "@/api/flashcards-api"
+import renderMarkdown from "@/utils/render-markdown"
+
+defineProps<{ flashcard: Flashcard }>()
+</script>
+
+<style scoped>
+.face-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  line-height: 1.5;
+  white-space: pre-line;
+}
+</style>