feat(pages): add chapter picker dropdown to story pages

This commit is contained in:
parent 3b7eb4822e
commit 9ecb93d85d
Signed by: tablet
GPG Key ID: 924A5F6AF051E87C

@ -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>