\n {/* Story Header */}\n

{story.title}

A story about: {story.subject}

\n\n {/* Main Story Image */}\n

\n ${story.title}\n$ \n \n

📖 Story Chapters

\n {story.chapters.map((chapter, index) => (\n handleChapterSelect(index)}\n className=\"bg-gray-50 hover:bg-gray-100 p-4 rounded-lg text-left transition-colors border border-gray-200 hover:border-purple-300\"\n >\n

\n Chapter {chapter.id}\n

{chapter.title}

\n \n ))}\n

\n\n

\n handleChapterSelect(0)}\n className=\"btn-primary text-white font-semibold py-3 px-6 rounded-lg flex items-center\"\n >\n 📖\n Start Reading\n \n \n \n ✨\n Create New Story\n \n

\n );\n }\n\n const chapter = story.chapters[currentChapter];\n const isLastChapter = currentChapter === story.chapters.length - 1;\n\n return (\n

\n {/* Navigation Header */}\n

\n setShowOverview(true)}\n className=\"flex items-center text-purple-100 hover:text-white transition-colors\"\n >\n ←\n Back to Overview\n \n \n

Chapter {currentChapter + 1} of {story.chapters.length}

{story.title}

\n \n

\n {Math.round(((currentChapter + 1) / story.chapters.length) * 100)}% Complete\n

\n\n {/* Chapter Content */}\n \n\n {/* Navigation Footer */}\n

\n \n ←\n Previous\n \n\n

\n {story.chapters.map((_, index) => (\n handleChapterSelect(index)}\n className={`w-3 h-3 rounded-full transition-colors ${\n index === currentChapter \n ? 'bg-purple-600' \n : index < currentChapter \n ? 'bg-purple-300' \n : 'bg-gray-300'\n }`}\n />\n ))}\n

\n\n {isLastChapter ? (\n \n ✨\n Create New Story\n \n ) : (\n \n Next\n →\n \n )}\n

\n );\n}","deleted","label",[167,168,149],"frontend","components","permalink","https://www.val.town/x/wmichaelaustin/Storyteller/code/frontend/components/StoryDisplay.tsx","extension","actionData","errors"]