Zum Hauptinhalt springen

Get Involved

Whether you are a developer, designer, writer, project builder, or just someone passionate about Cardano.

Insights Epoch Nav

InsightsEpochNav​

A compact epoch switcher for /insights pages that show data per epoch. It has previous and next buttons around the current epoch number, and a number field with a "Go" button to jump to any epoch in range. On screens up to 768px the field is replaced by a "Jump…" button that opens it on demand.

The component holds no epoch state of its own. The page passes the displayed epoch in and handles the change in onGoEpoch, for example by loading the data and updating the URL. /insights/supply uses it.

Basic Usage​

import InsightsEpochNav from '@site/src/components/Layout/InsightsEpochNav';

<div className="epochNavSticky">
  <InsightsEpochNav
    displayedEpoch={displayedEpoch}
    currentEpochNo={currentEpochNo}
    minEpoch={MIN_EPOCH}
    onGoEpoch={handleGoEpoch}
  />
</div>

Props​

PropTypeDefaultDescription
displayedEpochnumberrequiredThe epoch the page shows right now.
currentEpochNonumber | null-The latest epoch on chain and the upper limit. While it is null (still loading), the next button stays disabled and the jump range ends at displayedEpoch.
minEpochnumberrequiredThe lowest epoch the page has data for.
onGoEpoch(epoch: number) => voidrequiredCalled with the target epoch when the reader steps or jumps. Jumping to the displayed epoch does not call it.

Live Preview​

Behavior​

  • The jump field accepts only epochs between minEpoch and the latest epoch. Out of range input disables "Go" and shows the allowed range.
  • Enter in the field jumps, Escape closes the mobile jump row.
  • The epoch number is announced to screen readers when it changes (aria-live="polite").

Styling​

  • The styles live in the global nav.css next to the component, so the class names are not hashed.
  • Wrap the component in an element with the class epochNavSticky to pin it below the navbar as a rounded bar. On mobile that wrapper turns it into a floating bar at the bottom of the screen.

Translation​

The tooltips, the jump field label, and the range hint are translated with IDs under insightsEpochNav.*.