From 0d635fc6a1cccbe41c98285011107dd89859a83e Mon Sep 17 00:00:00 2001
From: Joyelle Ndagijimana <njoyelle2@gmail.com>
Date: Fri, 21 Mar 2025 16:32:12 +0100
Subject: [PATCH] =?UTF-8?q?feat:=20alle=20functionaliteiten=20van=20de=20u?=
 =?UTF-8?q?ser=20homepage=20zijn=20ge=C3=AFmplementeerd?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/BrowseThemes.vue     |  3 +-
 frontend/src/components/ThemeCard.vue        | 31 ++++++++++++++------
 frontend/src/i18n/locale/en.json             |  2 +-
 frontend/src/router/index.ts                 |  2 +-
 frontend/src/views/SingleTheme.vue           |  2 +-
 frontend/src/views/homepage/UserHomePage.vue |  1 -
 6 files changed, 26 insertions(+), 15 deletions(-)

diff --git a/frontend/src/components/BrowseThemes.vue b/frontend/src/components/BrowseThemes.vue
index 1c1642c7..8c1a7dde 100644
--- a/frontend/src/components/BrowseThemes.vue
+++ b/frontend/src/components/BrowseThemes.vue
@@ -4,7 +4,7 @@
     import { useI18n } from "vue-i18n";
     import {AGE_TO_THEMES, THEMESITEMS} from "@/utils/constants.ts";
 
-    // Receive the selectedTheme from the parent component
+    // Receive the selectedTheme and selectedAge from the parent component
     const props = defineProps({
         selectedTheme: {
             type: String,
@@ -31,7 +31,6 @@
             // Update the cards value with the fetched themes
             allCards.value = await response.json();
             cards.value = allCards.value;
-            //console.log(allCards.value);
         } catch (error) {
             console.error("Error fetching themes:", error);
         }
diff --git a/frontend/src/components/ThemeCard.vue b/frontend/src/components/ThemeCard.vue
index 2bafa2ce..ac9b3904 100644
--- a/frontend/src/components/ThemeCard.vue
+++ b/frontend/src/components/ThemeCard.vue
@@ -1,18 +1,23 @@
 <script setup lang="ts">
-    import { useI18n } from "vue-i18n";
+import { useI18n } from "vue-i18n";
 
-    const { t } = useI18n();
+const { t } = useI18n();
 
-    defineProps<{
-        path: string;
-        title: string;
-        description: string;
-        image: string;
-    }>();
+defineProps<{
+    path: string;
+    title: string;
+    description: string;
+    image: string;
+}>();
 </script>
 
 <template>
-    <v-card variant="outlined" class="theme-card d-flex flex-column">
+    <v-card
+        variant="outlined"
+        class="theme-card d-flex flex-column"
+        :to="`theme/${path}`"
+        link
+    >
         <v-card-title class="title-container">
             <v-img
                 v-if="image"
@@ -39,6 +44,11 @@
     flex-direction: column;
     height: 100%;
     padding: 1rem;
+    cursor: pointer;
+}
+
+.theme-card:hover {
+    background-color: rgba(0, 0, 0, 0.03);
 }
 
 .title-container {
@@ -57,5 +67,8 @@
 
 .title {
     flex-grow: 1;
+    white-space: normal;
+    overflow-wrap: break-word;
+    word-break: break-word;
 }
 </style>
diff --git a/frontend/src/i18n/locale/en.json b/frontend/src/i18n/locale/en.json
index 6095a79f..7966251c 100644
--- a/frontend/src/i18n/locale/en.json
+++ b/frontend/src/i18n/locale/en.json
@@ -12,7 +12,7 @@
     "choose-age": "Select age",
     "theme-options": {
         "all": "All themes",
-        "culture": "culture",
+        "culture": "Culture",
         "electricity-and-mechanics": "Electricity and mechanics",
         "nature-and-climate": "Nature and climate",
         "agriculture": "Agriculture",
diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
index d86d519b..0d1b5a0d 100644
--- a/frontend/src/router/index.ts
+++ b/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();
diff --git a/frontend/src/views/SingleTheme.vue b/frontend/src/views/SingleTheme.vue
index 85af7153..73336fa3 100644
--- a/frontend/src/views/SingleTheme.vue
+++ b/frontend/src/views/SingleTheme.vue
@@ -3,7 +3,7 @@
 </script>
 
 <template>
-
+<main></main>
 </template>
 
 <style scoped>
diff --git a/frontend/src/views/homepage/UserHomePage.vue b/frontend/src/views/homepage/UserHomePage.vue
index 20b38433..b6cdea17 100644
--- a/frontend/src/views/homepage/UserHomePage.vue
+++ b/frontend/src/views/homepage/UserHomePage.vue
@@ -72,7 +72,6 @@ import {ref, watch} from "vue";
         </v-container>
 
         <BrowseThemes :selectedTheme="selectedThemeKey ?? ''" :selectedAge="selectedAgeKey ?? ''"/>
-        />
     </div>
 </template>