65 lines
1.7 KiB
Markdown
65 lines
1.7 KiB
Markdown
# 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.tsx` with discover UI
|
|
- `src/components/PopularShows.tsx` with shows grid
|
|
- `src/components/CategoryFilter.tsx` with 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
|