Store

Product detail header

The product screen header, with an optional completion ring.

Available

Needs mock props

Dual breakpoint

Examples

This component's Storybook stories, embedded. They are the maintained source for its states, so Lantern shows them rather than keeping a duplicate set.

Product detail header

Rendered live from Storybook

Open

Storybook must be running for this to load — npm run storybook from the repo root, or set NEXT_PUBLIC_STORYBOOK_URL to a deployed instance.

Reference

Transcribed from the component audit. If this disagrees with the source, the source is right.

Source: src/components/store/ProductDetailHeader.tsx
Portability: Needs its app dependencies replaced by props before it renders in isolation.
Responsive: Carries a load-bearing max-md: / md: pair. Sign off at both viewports — see the rule.
Notes: The reference case for the dual-breakpoint rule: two separate back buttons, one max-md:hidden and one md:hidden.