tdpeuter/2025SELab2-project-Dwengo
tdpeuter/2025SELab2-project-Dwengo
1
Fork 0
Code Issues Releases 4 Packages 2 Wiki Activity

feat: theme card component aangemaakt

Browse source
This commit is contained in:
Joyelle Ndagijimana 2025-03-19 21:19:44 +01:00
parent 501ea6259c
commit 03a9e513a8
7 changed files with 143 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

50
frontend/src/components/BrowseThemes.vue
View file

@ -1,9 +1,57 @@
<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",
},
];
</script>
<template>
<main></main>
<v-container>
<v-row>
<v-col
v-for="(card, index) in cards"
:key="index"
cols="12"
sm="6"
md="4"
lg="3"
>
<ThemeCard
:path="card.key"
:title="card.title"
:description="card.description"
:image="card.image"
/>
</v-col>
</v-row>
</v-container>
</template>
<style scoped></style>

27
frontend/src/components/ThemeCard.vue Normal file
View file

@ -0,0 +1,27 @@
<script setup lang="ts">
import { useI18n } from "vue-i18n";
const { t } = useI18n();
defineProps<{
path: string;
title: string;
description: string;
image: string;
}>();
</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-actions>
<v-btn :to="`theme/${path}`" variant="text">
{{ t("read-more") }}
</v-btn>
</v-card-actions>
</v-card>
</template>
<style scoped>
</style>