feat(backend): SingleTheme-pagina geïmplementeerd

frontend/src/views/learning-paths/LearningPathSearchPage.vue

@@ -3,10 +3,10 @@
     import {useRoute, useRouter} from "vue-router";
     import {computed} from "vue";
     import {useI18n} from "vue-i18n";
-    import {convertBase64ToImageSrc} from "@/utils/base64ToImage.ts";
     import LearningPathSearchField from "@/components/LearningPathSearchField.vue";
     import {useSearchLearningPathQuery} from "@/queries/learning-paths.ts";
     import UsingQueryResult from "@/components/UsingQueryResult.vue";
+    import LearningPathsGrid from "@/components/LearningPathsGrid.vue";
 
     const route = useRoute();
     const router = useRouter();
@@ -23,34 +23,7 @@
     </div>
 
     <using-query-result :query-result="searchQueryResults" v-slot="{ data }: {data: LearningPath[]}">
-        <div class="results-grid" v-if="data.length > 0">
-            <v-card
-                class="learning-path-card"
-                link
-                :to="`${learningPath.hruid}/${learningPath.language}/${learningPath.startNode.learningobjectHruid}`"
-                v-for="learningPath in data"
-            >
-                <v-img
-                    height="300px"
-                    :src="convertBase64ToImageSrc(learningPath.image)"
-                    cover
-                    v-if="learningPath.image"
-                ></v-img>
-                <v-card-title>{{ learningPath.title }}</v-card-title>
-                <v-card-subtitle>
-                    <v-icon icon="mdi-human-male-boy"></v-icon>
-                    <span>{{ learningPath.targetAges.min }} - {{ learningPath.targetAges.max }} {{ t('yearsAge') }}</span>
-                </v-card-subtitle>
-                <v-card-text>{{ learningPath.description }}</v-card-text>
-            </v-card>
-        </div>
-        <div content="empty-state-container" v-else>
-            <v-empty-state
-                icon="mdi-emoticon-sad-outline"
-                :title="t('noLearningPathsFound')"
-                :text="t('noLearningPathsFoundDescription')"
-            ></v-empty-state>
-        </div>
+        <learning-paths-grid :learning-paths="data"></learning-paths-grid>
     </using-query-result>
     <div content="empty-state-container">
         <v-empty-state
@@ -67,17 +40,7 @@
         display: block;
         margin: 20px;
     }
-    .results-grid {
-        margin: 20px;
-        display: flex;
-        align-items: stretch;
-        gap: 20px;
-        flex-wrap: wrap;
-    }
     .search-field {
         max-width: 300px;
     }
-    .learning-path-card {
-        width: 300px;
-    }
 </style>