From 9ecb93d85dc3612bdeb6b9dcccb57a2b7749efb5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=98=99=E2=97=A6=20The=20Tablet=20=E2=9D=80=20GamerGirla?=
 =?UTF-8?q?ndCo=20=E2=97=A6=E2=9D=A7?= <i.am.the.tablet@proton.me>
Date: Fri, 1 Dec 2023 17:52:42 -0500
Subject: [PATCH] feat(pages): add chapter picker dropdown to story pages

---
 components/story/view/chapterPicker.vue | 33 +++++++++++++++++++++++++
 1 file changed, 33 insertions(+)
 create mode 100644 components/story/view/chapterPicker.vue

diff --git a/components/story/view/chapterPicker.vue b/components/story/view/chapterPicker.vue
new file mode 100644
index 0000000..4657804
--- /dev/null
+++ b/components/story/view/chapterPicker.vue
@@ -0,0 +1,33 @@
+<script lang="ts" setup>
+	import { LabeledValue } from "ant-design-vue/es/select";
+	import { SingleChapterResult } from "~/lib/client/types/slightlyDifferentStory";
+
+	const { params } = useRoute();
+	const cidx = parseInt(params.cidx as string);
+	const story = inject<SingleChapterResult | null>("story")!;
+	const opts = ref<LabeledValue[]>(
+		story!.chapterNames.map(
+			(s, i) =>
+				({
+					label: s,
+					value: i + 1,
+				}) as LabeledValue,
+		),
+	);
+	const onChange = (v) => {
+		console.log("SELECT", v);
+		navigateTo(`/story/${story._id}/${v as LabeledValue}`);
+	};
+</script>
+
+<template>
+	<div style="display: flow-root">
+		<a-select :value="opts[cidx - 1]" @select="onChange" :options="opts" />
+	</div>
+</template>
+
+<style scoped>
+	.ant-select {
+		width: 100%;
+	}
+</style>