Learner Leaderboard

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its badge, avatar-initials 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/education/education11.tsx instead.

Usage

The file also exports education11Demo, 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 { Education11, education11Demo } from "@/components/blocks/education/education11";

export default function Page() {
  return <Education11 {...education11Demo} />;
}

Props

Types

type LeaderboardEntry = {
  rank: number;
  name: string;
  score: string;
  badge?: string;
};

type LeaderboardPeriod = "weekly" | "monthly" | "alltime";

Behavior notes

• The period tabs are REAL working client state: a `useState<LeaderboardPeriod>("weekly")` picks which of `periods.weekly` / `periods.monthly` / `periods.alltime` renders, and the active tab is visually highlighted with a solid background. This is genuine interactivity, not decorative.
• Each period's 5-entry array is supplied entirely by the caller via props; the component does no ranking, sorting, or scoring math of its own.
• Avatars use initials only (no photo prop) via the avatar-initials pattern, matched from each entry's `name`.
• Top-3 ranks (1st/2nd/3rd) get a distinct medal-style badge color; this is purely a CSS lookup by rank number, not separate state.
• The demo props live in a separate education11.demo.tsx sibling file (no "use client" directive) since this component is a Client Component - block-layout.tsx's Server Component spreads these props onto the live preview, and a demo object exported from a "use client" module resolves to undefined when spread from server code.