Story Interface - Copy this React, Tailwind Component to your project
**Prompt:** Design a React application interface for a website that transcribes and organizes the story content of the social game "Blue Archive." In addition to the overall structure, focus on creating a detailed and user-friendly design for the **Content Page** based on the following requirements: --- ### Content Page Design: 1. **Dialogue Display**: - Each page contains up to **100 lines of dialogue**. - Dialogue is divided into two types: - **Character Dialogue**: - Display the text content. - Include the character's name (if available) and their affiliation (if available). - If the character's name is provided, show their image alongside the dialogue. - **Protagonist Dialogue**: - Display as a choice selection format with up to 5 options (or just 1 option in some cases). 2. **Layout**: - Ensure the layout supports readability, with clear visual separation between different dialogue types. - For Character Dialogue: - Highlight character images and text alignment for easy recognition. - For Protagonist Dialogue: - Use a clean, interactive button or card layout for selectable choices. 3. **Navigation**: - Include buttons or links for navigating between episodes or chapters. - Display the current story, chapter, and episode names prominently at the top of the page. --- **Output:** Generate a polished and responsive design for the **Content Page** that enhances the storytelling experience and ensures users can easily engage with and navigate the dialogue.
