A client-side React component that displays paginated result counts with optional sorting context for vendor or post listings. ## Key Components **`ResultsCountProps`** — Interface defining component inputs: | Prop | Type | Description | |---|---|---| | `currentPage` | `number` | Active page number (1-based) | | `pageSize` | `number` | Number of results per page | | `totalResults` | `number` | Total count across all pages | | `resultType` | `'vendors' \| 'posts'` | Controls singular/plural label | | `sortingMessage` | `string` (optional) | Accent-colored sort context appended to count | **`ResultsCount`** — Functional component that computes the visible result range and renders a summary string. Returns `null` when `totalResults` is `0`. ## Usage Example ```typescript // Basic pagination count // → "Showing 21-40 of 85 vendors" // With sorting context // → "Showing 1-1 of 1 post • sorted by relevance" // Returns null — renders nothing ``` ## Notes - Range is computed as `startIndex = (currentPage - 1) * pageSize + 1` and `endIndex = Math.min(currentPage * pageSize, totalResults)`, preventing out-of-bounds display on the last page. - Automatically handles singular/plural labeling (`vendor` vs `vendors`, `post` vs `posts`). - `sortingMessage` renders in accent color (`text-ods-accent`) prefixed with a bullet separator. **Source:** [`results-count.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/results-count.tsx)