Syllabus

About this piece

Weekly syllabus where completed weeks get an emerald W tile and their titles are struck through.

Usage

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

import { Education23 } from "@/components/beste/piece/education23";

<Education23
  courseTitle="CS 401 · Syllabus"
  weeks={[
    {
      "week": 1,
      "title": "Fundamentals of composition",
      "done": true
    },
    {
      "week": 2,
      "title": "State & reactivity",
      "done": true
    },
    {
      "week": 3,
      "title": "Hooks in depth",
      "done": true
    },
    {
      "week": 4,
      "title": "Performance patterns"
    },
    {
      "week": 5,
      "title": "Server components"
    }
  ]}
/>

More Education pieces

View all Education

24 lessons

Design systems for shipping teams

Beste Sözen6h 42m

58%

Course Card

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

Composing tokens with Tailwind18 min

Lesson Row

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

Top of the cohort

Priya Shah98

Noor Ahmed94

Jordan Reyes91

Beste Sözen89

Student Roster

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

Midterm essayDue Thu 24 Apr · 23:59

79%

142Submitted

8Late

30Missing

180 students in cohort

Assignment Stats

Teacher dashboard tile with a progress bar and three tinted tiles counting submitted, late, and missing.

You passed

8/ 10

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

Quiz Result

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

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

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