Live Class

Dark live-classroom widget with a red live chip, attendee and raised-hand counts, and mic/video toggles.

Live42:18 into class

Live class · Typescript generics

1423

Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.

Import & use

import { Education19 } from "@/components/beste/piece/education19";

<Education19
  title="Live class · Typescript generics"
  attendees={142}
  raisedHands={3}
  micOn={false}
  durationSoFar="42:18 into class"
/>

More Education pieces

View all Education

Live workshopLive workshop · TypeScript generics

Thu, May 218:00 UTC+390 minutes

412 enrolled · 88 seats left

Live Workshop

education24

Upcoming workshop card with a pulsing live pill, date/time/duration line, enrollment count, and a CTA.

12:48

Chapter 4 · PerformanceRefactoring a big list into virtualized rows

Video Lesson

education4

Video lesson card with a play thumbnail, duration badge, watched bar, and a chapter eyebrow.

Prof. Lira VasquezInstructor · Announcement

Office hours moved to Thursday

I'll be out Tuesday for a conference. Drop in Thursday 15:00 – 17:00 instead — same Zoom link in the syllabus.

Posted 2 hours ago

Class Announcement

education17

Left-ruled amber announcement from an instructor with a megaphone chip, title, body, and timestamp.

24 lessons

Design systems for shipping teams

Beste Sözen6h 42m

58%

Course Card

education1

Course tile with a gradient thumbnail, instructor byline, duration, and an inline progress bar.

Lesson 6 · Hooks in depth

useEffect runs after the DOM commit, not during render.Cleanup runs before the next effect, and on unmount.

Ask Priya about the stale-closure example in office hours.

Lesson Highlights

education18

Saved-quote card grouping highlighter-tinted excerpts and an italic personal note beneath them.

Top of the cohort

Priya Shah98

Noor Ahmed94

Jordan Reyes91

Beste Sözen89

Student Roster

education22

Ranked student list with rank digits, avatar initials, and emerald score pills on the right.