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?"
}
]}
/>Saved-quote card grouping highlighter-tinted excerpts and an italic personal note beneath them.
In lesson 6, the dependency array skips the `setCount` setter. Isn't it a stale closure risk?
Student Q&A card with an avatar header, resolved pill, clipped question body, and reply and like counts.
Course metadata strip summarizing student count, star rating, and last updated in a three-column grid.
Single lesson entry with a status glyph on the left, title, duration, and padded index on the right.
Streak card with a flame badge, seven-day dot grid, and an encouraging caption underneath.
Video lesson card with a play thumbnail, duration badge, watched bar, and a chapter eyebrow.