Zum Hauptinhalt springen

Get Involved

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

Insights Footer

InsightsFooter​

A small <footer> with a top border and the translated sentence Last updated: {lastUpdated}. Charts are using real time data. Pages whose charts come from static data pass liveData={false} and get Last updated: {lastUpdated}. without the real-time claim. It is only meaningful as the last child of an Insights Layout page and is used on every page under /insights.

Basic Usage​

A fixed date from the page's meta, as in src/pages/insights/template/index.js:

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

<InsightsFooter lastUpdated={meta.date} />

A live value, as in src/pages/insights/supply/index.js, where the date and epoch come from the fetched data:

<InsightsFooter lastUpdated={`${epochDate} (epoch ${displayedEpoch})`} />

Static chart data, as in src/pages/insights/governance-actions/index.js, where meta.updated holds the date of the last data change:

<InsightsFooter lastUpdated={meta.updated} liveData={false} />

Props​

PropTypeDefaultDescription
lastUpdatedstring-Inserted verbatim into the sentence in place of {lastUpdated}. Pass a preformatted date string.
liveDatabooleantrueWhen false, the sentence drops "Charts are using real time data." Use it for pages that render static data.

Live Preview​

Letzte Aktualisierung: 2025-03-17. Charts verwenden Echtzeitdaten.

Notes​

  • The sentence itself is translated inside the component (insights.footer.text, or insights.footer.textStatic with liveData={false}), so consumers only pass the date value.
  • Any extra props are ignored. Some pages pass an epoch prop, which the component does not read.
  • The footer is styled inline with theme tokens (--ifm-toc-border-color, --ifm-color-content-secondary), so it needs no CSS module and works in dark mode.