Last active
May 8, 2025 16:05
-
-
Save giolaq/4ba26e8b2e17dab6abbf43b6636a1fc7 to your computer and use it in GitHub Desktop.
oneprompt.txt
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Study the codebase in the current directory and develop the following feature using the same coding style and best practices of the project. | |
| Create a new carousel page in the React Native Multi-TV App that fetches and displays data from the VibePope API's. The implementation should include | |
| 1. Create a new API service file at services/api.ts that: | |
| - API endpoint from https://vibepope.onrender.com with /api/cardinals | |
| - Defines interfaces for the API response and carousel items | |
| - Implements a fetchCarouselData() function that authenticates with NODE_ENV = production | |
| - Maps the cardinal data (name, biography_text, photo_url) to the format expected by the carousel | |
| - IMPORTANT: The API returns an object with a 'cardinals' array, not directly an array. The response structure is: | |
| { | |
| "total": number, | |
| "page": number, | |
| "limit": number, | |
| "cardinals": [ | |
| { | |
| "name": string, | |
| "biography_text": string, | |
| "photo_url": string, | |
| ... | |
| }, | |
| ... | |
| ] | |
| } | |
| 2. Create a new page at app/(drawer)/cardinals.tsx that: | |
| - Fetches data from the API with proper loading and error states | |
| - Displays a horizontally scrollable carousel of cardinal cards | |
| - Shows a hero component at the top that updates based on the focused item | |
| - Ensures cardinal photos are fully visible and centered in both the carousel cards and hero component | |
| - Ensures cardinal biography_text in the hero component occupyes only 10 lines, use ellipsis if longer and the bioellipsis should be on the left side, do not cover the photo | |
| - Uses a dark background for the hero component with text at the bottom | |
| - Implements TV-friendly focus management and navigation | |
| - Apply the best practices for React Native | |
| - Include a placeholder UI for when no item is focused or data is still loading | |
| 3. Update components/CustomDrawerContent.tsx to: | |
| - Add a new "Cardinals" option to the drawer menu | |
| - Link it to the new cardinals page | |
| 4. Style the carousel to: | |
| - Use "contain" for image resizeMode to show full cardinal photos | |
| - Center images in their containers | |
| - Use dark backgrounds to make images stand out | |
| - Place text in a semi-transparent container at the bottom of the hero component | |
| - Follow the existing app's design patterns for consistency | |
| The cardinals page should be accessible from the left-side drawer menu and should navigate to the details page when an item is selected. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment