From a2c7d1c850d169add793514f7c02046bf945afb4 Mon Sep 17 00:00:00 2001
From: Kevin Midboe <kevin.midboe@gmail.com>
Date: Tue, 10 Mar 2026 23:49:58 +0100
Subject: [PATCH] Add section page component for browsing discover categories

---
 src/pages/SectionPage.vue | 40 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 40 insertions(+)
 create mode 100644 src/pages/SectionPage.vue

diff --git a/src/pages/SectionPage.vue b/src/pages/SectionPage.vue
new file mode 100644
index 0000000..412a6c0
--- /dev/null
+++ b/src/pages/SectionPage.vue
@@ -0,0 +1,40 @@
+<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>