Build a Search Results Page

Problem/Feature Description

A knowledge base application needs a search page where users can find articles. Build it using React and TypeScript.

Features:

• Search input at the top of the page with a search icon and placeholder text "Search articles..."
• Results list that updates when the user submits the search (press Enter or click a search button)
• Each result shows:
  • Title (clickable, links to /articles/:slug)
  • Snippet/excerpt (first 150 characters of the article body)
  • Category badge (e.g., "Getting Started", "API Reference", "Troubleshooting")
  • Published date
• Result count displayed above the list (e.g., "Showing 12 results for 'authentication'")
• Empty state when no results match -- show a friendly message and suggest broadening the search
• Pagination at the bottom with Previous/Next buttons and page numbers, 10 results per page

The search calls GET /api/articles?q={query}&page={page} which returns:

{
  "results": [...],
  "total": 42,
  "page": 1,
  "totalPages": 5
}

Output Specification

Produce:

• src/pages/SearchPage.tsx -- the main search page
• src/components/SearchInput.tsx -- the search input component
• src/components/SearchResult.tsx -- a single result item
• src/components/Pagination.tsx -- pagination controls
• src/pages/SearchPage.css -- styles