Banner Countdown Session

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its dependencies and any missing npm packages, and installs them straight into your project.

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/banner/banner23.tsx instead.

Usage

The file also exports banner23Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Banner23, banner23Demo } from "@/components/blocks/banner/banner23";

export default function Page() {
  return <Banner23 {...banner23Demo} />;
}

Props

Behavior notes

• The countdown shows "--:--:--" until the first useEffect tick runs, since Date.now() can't be safely read during server rendering.
• Clicking extend moves the local target state forward by extendMinutes rather than calling an endpoint; wire the onClick to a real auth refresh call and set target from its response for production use.
• The interval is keyed on target, so changing it (via the extend button, or a future prop update) automatically restarts the countdown against the new value.
• Formatting is HH:MM:SS with no day segment, since session countdowns are expected to stay well under 24 hours; hours simply keep climbing past 99 if targetTimestamp is set further out.

Frequently asked questions