Timestamped transcript panel where the currently-playing line picks up a sky background highlight.
Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.
import { Education20 } from "@/components/beste/piece/education20";
<Education20
lesson="Transcript · 12:48 of 28:14"
lines={[
{
"timestamp": "12:31",
"speaker": "Prof. Vasquez",
"text": "So whenever you see a generic constraint like `T extends`, ask yourself what the caller will pass."
},
{
"timestamp": "12:42",
"speaker": "Prof. Vasquez",
"text": "This pattern prevents us from widening the type back to unknown.",
"active": true
},
{
"timestamp": "12:58",
"speaker": "Priya",
"text": "What happens if we omit the constraint entirely?"
}
]}
/>