feat: thema's worden gefetched van de api

frontend/src/components/BrowseThemes.vue

@@ -1,53 +1,38 @@
 <script setup lang="ts">
-    // This component contains a list with all themes and will be shown on a student's and teacher's homepage.
     import ThemeCard from "@/components/ThemeCard.vue";
-    const cards = [
-        {
-            key: "1",
-            title: "Card 1",
-            description: "This is card 1",
-            image: "https://via.placeholder.com/150",
-        },
-        {
-            key: "2",
-            title: "Card 2",
-            description: "This is card 2",
-            image: "https://via.placeholder.com/150",
-        },
-        {
-            key: "3",
-            title: "Card 3",
-            description: "This is card 3",
-            image: "https://via.placeholder.com/150",
-        },
-        {
-            key: "4",
-            title: "Card 4",
-            description: "This is card 4",
-            image: "https://via.placeholder.com/150",
-        },
-    ];
-
+    import {onMounted, ref} from "vue";
+    const cards = ref<Array<{ key: string; title: string; description: string; image: string }>>([]);
 
+    const fetchThemes = async () => {
+        try {
+            const response = await fetch("http://localhost:3000/api/theme");
+            cards.value = await response.json();
+        } catch (error) {
+            console.error("Error fetching themes:", error);
+        }
+    };
 
+    onMounted(fetchThemes);
 </script>
 
 <template>
     <v-container>
         <v-row>
             <v-col
-                v-for="(card, index) in cards"
-                :key="index"
+                v-for="card in cards"
+                :key="card.key"
                 cols="12"
                 sm="6"
                 md="4"
-                lg="3"
+                lg="4"
+            class="d-flex"
             >
             <ThemeCard
                 :path="card.key"
                 :title="card.title"
                 :description="card.description"
                 :image="card.image"
+                class="fill-height"
             />
             </v-col>
         </v-row>

frontend/src/components/ThemeCard.vue

@@ -12,16 +12,50 @@
 </script>
 
 <template>
-    <v-card :title="t(`${title}`)" :text="t(`${description}`)" variant="outlined">
-        <v-img v-if="image" :src="image" height="200px" cover></v-img>
+    <v-card variant="outlined" class="theme-card d-flex flex-column">
+        <v-card-title class="title-container">
+            <v-img
+                v-if="image"
+                :src="image"
+                height="40px"
+                width="40px"
+                contain
+                class="title-image"
+            ></v-img>
+            <span class="title">{{ t(title) }}</span>
+        </v-card-title>
+        <v-card-text class="description flex-grow-1">{{ t(description) }}</v-card-text>
         <v-card-actions>
             <v-btn :to="`theme/${path}`" variant="text">
                 {{ t("read-more") }}
             </v-btn>
-
         </v-card-actions>
     </v-card>
 </template>
 
 <style scoped>
+.theme-card {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    padding: 1rem;
+}
+
+.title-container {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    text-align: left;
+    justify-content: flex-start;
+}
+
+.title-image {
+    flex-shrink: 0;
+    border-radius: 5px;
+    margin-left: 0;
+}
+
+.title {
+    flex-grow: 1;
+}
 </style>

frontend/src/router/index.ts

@@ -119,7 +119,7 @@ router.beforeEach(async (to, from, next) => {
     // Verify if user is logged in before accessing certain routes
     if (to.meta.requiresAuth) {
         if (!authState.isLoggedIn.value) {
-            //Next("/login");
+            //next("/login");
             next();
         } else {
             next();