Coach Stories
Story explorer
The intro, the category rail and the grid, wired together. Picking a category narrows the grid to its stories, and the grid fades across.
components/coach/blocks/story-explorer.tsx
Preview
Live, on the prototype's content. Switch to mobile to see it at 390px.
1440pxOpen
Built from
Usage
import { StoryExplorer } from "@/components/coach/blocks/story-explorer";
<StoryExplorer
title="Explore the world of Coach"
description="…"
categories={categories}
items={exploreGrid}
headingLevel="h1"
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| title* | string | — | The section intro's title. |
| description | string | — | The line under it. |
| categories* | Category[] | — | The rail. Each id matches a story's section. |
| items* | GridItem[] | — | Every story, in Latest order. |
| allId | string | "latest" | The category that shows everything. |
| headingLevel | "h1" | "h2" | "h2" | h1 when the explorer heads the page. |
| priority | boolean | — | Eager images for the first row of Latest. |