mirror of
https://github.com/KevinMidboe/seasoned.git
synced 2026-05-08 07:15:30 +00:00
* Add discover page components with category showcase * Add section page component for browsing discover categories * Add icons for discover page categories (spotlights, theater, compass, calendar, star) * Add discover icon (compass navigation) for main navigation * Update navigation to use IconDiscover for discover route * Add discover and section page routes with interfaces * Update home page and components to integrate with discover navigation * Remove deprecated ListPage component
41 lines
1.1 KiB
Vue
41 lines
1.1 KiB
Vue
<template>
|
|
<ResultsSection :title="sectionName" :api-function="_getSectionData" />
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref } from "vue";
|
|
import type { Ref } from "vue";
|
|
import { useRoute } from "vue-router";
|
|
import ResultsSection from "@/components/ResultsSection.vue";
|
|
import { getTmdbMovieListByName, getTmdbMovieDiscoverByName } from "../api";
|
|
|
|
const route = useRoute();
|
|
const sectionName: Ref<string | string[]> = ref(
|
|
route?.params?.name || "Section page"
|
|
);
|
|
|
|
// Determine if this is a discover section or a list based on the route path
|
|
const isDiscoverSection = route.path.startsWith("/discover/");
|
|
|
|
function _getSectionData(page: number) {
|
|
const name = sectionName.value?.toString();
|
|
|
|
// Use the appropriate API function based on the route type
|
|
if (isDiscoverSection) {
|
|
return getTmdbMovieDiscoverByName(name, page);
|
|
} else {
|
|
return getTmdbMovieListByName(name, page);
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.fullwidth-button {
|
|
width: 100%;
|
|
margin: 1rem 0;
|
|
padding-bottom: 2rem;
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
</style>
|