4.4: Create Story List Component #85
Description
Overview
Create the main story list display (Server Component).
Parent Epic: #70
Priority: P0
Prerequisites
- 4.1: Create Root Layout Component #82 (4.1: Create Root Layout Component)
Next Issues (after this is complete)
- 4.5: Create Individual Story Component
- 4.6: Create Pagination Component
Acceptance Criteria
-
app/javascript/components/Stories.tsxcreated (Server Component) - Receives stories array as props from Rails controller
- Renders ordered list of Story components
- Shows story rank numbers (1-30, etc.)
- Includes pagination component
- CSS module styling (
Stories.module.css)
Implementation Notes
interface StoriesProps {
stories: Story[];
page: number;
type: 'top' | 'new' | 'show' | 'ask' | 'jobs';
}
export default function Stories({ stories, page, type }: StoriesProps) {
const startRank = (page - 1) * 30 + 1;
return (
<ol className={styles.list} start={startRank}>
{stories.map((story, index) => (
<Story key={story.id} story={story} rank={startRank + index} />
))}
</ol>
);
}