[projects-page][Grid] Results grid + pagination + states

[Benjtalkshow]

Context

The projects page renders the results as a grid of project cards with loading, empty, and error states, a result count, and pagination.

Depends on: the projects data hooks issue (useProjects) and the shared card mapper.

Live reference

https://boundlessfi.xyz/bounties — the results grid, the result count in the toolbar, and the "load more" behaviour at the bottom.

What to build

A ProjectsResults block that takes the useProjects result (or the params, and calls it) and renders:

1. Grid of cards — map each project through the shared mapper to OpportunityCardView and render components/cards/opportunity-card.tsx in a responsive grid (1 / 2 / 3 columns).
2. Loading — a grid of components/cards/opportunity-card-skeleton.tsx.
3. Empty — a centered muted message when pagination.total is 0 or the filtered result is empty.
4. Error — a centered muted message when the query errors.
5. Result count — use the vendored components/discover/discover-toolbar.tsx / discover-header.tsx to show the count (e.g. "24 projects").
6. Pagination — "Load more" using pagination.hasNext (append the next page), or page-based pagination with components/ui/pagination.tsx. Pick one and keep it consistent.

Where files go

• components/discover/projects-results.tsx.

Design system / reuse (in this repo)

• components/cards/opportunity-card.tsx + components/cards/opportunity-card-skeleton.tsx (the project card and its skeleton).
• components/discover/discover-toolbar.tsx, components/discover/discover-header.tsx (result count / header).
• components/ui/pagination.tsx or a Button-based "Load more".
• Follow design.md. Content caps at max-w-page.

Out of scope

• Search, tabs, filters (separate issues) — this issue just renders results for whatever params it is given.

Acceptance criteria

• Renders OpportunityCards from useProjects via the shared mapper, in a responsive grid.
• Loading (skeletons), empty, and error states handled.
• Shows the result count and supports pagination / load-more via pagination.
• npm run lint and npm run build pass.
• Screenshot attached (populated, loading, and empty states if possible).

References (in this repo)

• components/cards/opportunity-card.tsx, components/cards/opportunity-card-skeleton.tsx.
• components/discover/discover-toolbar.tsx, components/discover/discover-header.tsx, components/ui/pagination.tsx.
• components/discover/use-projects.ts, ENDPOINTS.md, design.md.

[linear]

BOU-343

[coderabbitai]

🔗 Related PRs

#325 - feat(cards): add BuilderCard component and skeleton [merged]
#328 - #324 [landing-page][Page] Compose landing page and states FIXED [merged]
#335 - feat(landing): add featured projects section [merged]
#336 - feat(about): add What you'll find section [merged]
#346 - chore: port discover filter/toolbar components for the projects page [open]

---

📝 Issue Planner

_{Check the box below or use the @coderabbitai plan command to generate an implementation plan and prompts that you can use with your favorite coding assistant.}

• Create Plan

---

🧪 Issue enrichment is currently in open beta.

You can configure auto-planning by selecting labels in the issue_enrichment configuration.

To disable automatic issue enrichment, add the following to your .coderabbit.yaml:

issue_enrichment:
  auto_enrich:
    enabled: false

💬 Have feedback or questions? Drop into our discord!

[sadiqabubakar826-del]

@sadiqabubakar826-del has applied to work on this issue as part of the Stellar Wave Program's 7th wave.

Hi maintainer Let me work on this issue
I'll definitely give you quick response

ℹ️ Repo Maintainers: To accept this application, review their application or assign @sadiqabubakar826-del to this issue.

[CITYZEN-AL-MUSTAPHA]

@CITYZEN-AL-MUSTAPHA has applied to work on this issue as part of the Stellar Wave Program's 7th wave.

Hey maintainer I would like to work on this issue

ℹ️ Repo Maintainers: To accept this application, review their application or assign @CITYZEN-AL-MUSTAPHA to this issue.

[divysam]

@divysam has applied to work on this issue as part of the Stellar Wave Program's 7th wave.

Hello
I would love to work on this issue please

ℹ️ Repo Maintainers: To accept this application, review their application or assign @divysam to this issue.

[TheFaith-Code]

@TheFaith-Code has applied to work on this issue as part of the Stellar Wave Program's 7th wave.

Hi, I'd like to work on this issue

ℹ️ Repo Maintainers: To accept this application, review their application or assign @TheFaith-Code to this issue.

[zeey-247]

@zeey-247 has applied to work on this issue as part of the Stellar Wave Program's 7th wave.

Hello, this issue matches my skills. I’d be happy to work on it.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @zeey-247 to this issue.

[nextgenuniversity1-oss]

@nextgenuniversity1-oss has applied to work on this issue as part of the Stellar Wave Program's 7th wave.

Hello,

I'd love the opportunity to work on this issue. I have experience building software across different parts of the stack and always aim to write clean, maintainable, and well-tested code. If assigned, I'll communicate my progress regularly, ask questions when clarification is needed, and ensure the implementation is thoroughly tested before submitting a PR.

Thank you for your consideration.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @nextgenuniversity1-oss to this issue.