41 lines
1.2 KiB
Vue
41 lines
1.2 KiB
Vue
<script setup lang="ts">
|
|
import { useMediaLibraryStore } from "@/stores/mediaLibrary";
|
|
import * as log from "loglevel";
|
|
import { computed } from "vue";
|
|
import type { MediaLibraryCategoryPage } from "@/types";
|
|
|
|
const props = defineProps<{
|
|
categorySlug: string;
|
|
}>();
|
|
|
|
log.debug("MediaLibraryCategoryPage created", props);
|
|
|
|
const mediaStore = useMediaLibraryStore();
|
|
|
|
const category = computed(() => {
|
|
return mediaStore.mediaLibraryPage?.children.find((c) =>
|
|
c.frontend_url.endsWith(props.categorySlug)
|
|
) as MediaLibraryCategoryPage | undefined;
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div v-if="mediaStore.mediaLibraryPage && category" class="container-large">
|
|
<div class="mb-10 mt-6 flex flex-col items-center justify-between lg:flex-row">
|
|
<h1>{{ category.title }}</h1>
|
|
</div>
|
|
<div>
|
|
<ul class="grid grid-cols-1 gap-5 md:grid-cols-4">
|
|
<li v-for="cat in category.children" :key="cat.id" class="bg-white p-4">
|
|
<router-link :to="cat.frontend_url" :data-cy="`${cat.title}-link`">
|
|
<img class="m-auto" :src="cat.icon_overview_url" alt="" />
|
|
<h3 class="text-center text-base">{{ cat.title }}</h3>
|
|
</router-link>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped></style>
|