48 lines
1.4 KiB
Vue
48 lines
1.4 KiB
Vue
<script setup lang="ts">
|
|
import { useMediaLibraryStore } from "@/stores/mediaLibrary";
|
|
import * as log from "loglevel";
|
|
import { ref, watch } from "vue";
|
|
|
|
log.debug("HandlungsfelderOverview created");
|
|
|
|
const mediaStore = useMediaLibraryStore();
|
|
const dropdownSelected = ref(mediaStore.selectedLearningPath);
|
|
|
|
watch(dropdownSelected, (newValue) =>
|
|
mediaStore.$patch({
|
|
selectedLearningPath: newValue,
|
|
})
|
|
);
|
|
</script>
|
|
|
|
<template>
|
|
<div class="mx-auto max-w-5xl">
|
|
<div class="flex flex-col lg:flex-row items-center justify-between mb-10">
|
|
<h1>Handlungsfelder</h1>
|
|
<!-- <ItDropdownSelect v-model="dropdownSelected" :items="mediaStore.availableLearningPaths"></ItDropdownSelect>-->
|
|
</div>
|
|
<div v-if="mediaStore.mediaLibraryPage">
|
|
<ul class="grid gap-5 grid-cols-1 lg:grid-cols-4">
|
|
<li
|
|
v-for="cat in mediaStore.mediaLibraryPage.children"
|
|
:key="cat.id"
|
|
class="bg-white p-4"
|
|
>
|
|
<router-link
|
|
:to="`/media/${mediaStore.mediaLibraryPage.slug}/handlungsfelder/${cat.slug}`"
|
|
>
|
|
<img class="m-auto" :src="`/static/icons/demo/${cat.overview_icon}.svg`" />
|
|
<h3 class="text-base text-center">{{ cat.title }}</h3>
|
|
</router-link>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.it-icon-hf > * {
|
|
@apply m-auto;
|
|
}
|
|
</style>
|