Course Progress

About this piece

Circular ring showing percent complete next to a course label and a lessons-done caption.

Usage

The import and the props worth knowing about, in one place.

import { Education3 } from "@/components/beste/piece/education3";

<Education3
  completed={14}
  total={24}
  label="React performance"
/>

24 lessons

Design systems for shipping teams

Beste Sözen6h 42m

58%

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

You passed

8/ 10

80% · Passing mark 7/10Finished in 12:42

Quiz outcome card with a trophy tile, pass or fail tint, score fraction, percent, and elapsed time.

14-day streakShow up tomorrow to keep it alive.

Streak card with a flame badge, seven-day dot grid, and an encouraging caption underneath.

Composing tokens with Tailwind18 min

Single lesson entry with a status glyph on the left, title, duration, and padded index on the right.

TypeScript4,320 / 5,000 XP

Lv 7

680 XP to Lv 8

Skill card with a violet level badge, XP numerator over denominator, and a gradient progress track.

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.

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