Video Lesson Hero

Installation

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

Usage

The file also exports education15Demo, 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 { Education15, education15Demo } from "@/components/blocks/education/education15";

export default function Page() {
  return <Education15 {...education15Demo} />;
}

Props

Types

type LessonNavItem = {
  label: string;
  title: string;
  href?: string;
};

Behavior notes

• The play button centered over the thumbnail is entirely decorative: there's no real video, no play state, and (since this is a Server Component) no onClick handler attached to it at all.
• navItems renders each entry as a next/link anchor when href is set, or as a plain non-interactive card when it isn't; the component itself performs no lesson navigation logic.
• The first navItems entry is styled to align left (assumed 'previous'), the second to align right (assumed 'next'); passing more than two entries will just left-align every one after the first.
• duration is a plain pre-formatted string, not computed from real video metadata.