1.7 KiB
1.7 KiB
38. Build Discover Page Component
meta: id: podcast-tui-app-38 feature: podcast-tui-app priority: P1 depends_on: [37] tags: [discover-page, popular-shows, solidjs, opentui]
objective:
- Create discover page component
- Display popular shows
- Implement category filtering
- Add to feed functionality
deliverables:
src/components/DiscoverPage.tsxwith discover UIsrc/components/PopularShows.tsxwith shows gridsrc/components/CategoryFilter.tsxwith category buttons
steps:
- Create
src/components/DiscoverPage.tsx:- Page header with title
- Category filter buttons
- Popular shows grid
- Show details view
- Add to feed button
- Create
src/components/PopularShows.tsx:- Grid display of popular podcasts
- Show cover image
- Show title and description
- Add to feed button
- Click to view details
- Create
src/components/CategoryFilter.tsx:- Category button group
- Active category highlighting
- Filter logic implementation
- Update parent DiscoverPage
tests:
- Unit: Test PopularShows displays correctly
- Unit: Test CategoryFilter functionality
- Integration: Test discover page navigation
acceptance_criteria:
- Discover page displays popular shows
- Category filtering works correctly
- Shows are ordered reverse chronologically
- Clicking a show shows details
- Add to feed button works
validation:
- Run application and navigate to "Discover"
- Verify popular shows appear
- Click different categories
- Click a show and verify details
- Try add to feed
notes:
- Use Flexbox for category filter layout
- Use Grid for shows display
- Add loading state if fetching from API
- Handle empty categories
- Add hover effects for interactivity