Components
Registration countdown and availability
Explain time-based registration context only when a real course has the relevant dates configured.
On this page
Purpose and usage
Explain time-based registration context only when a real course has the relevant dates configured.
Anatomy
| Part | Contract |
|---|---|
| Heading | Open or close context |
| Time | Remaining duration |
| Availability | Calculated from current date and timezone |
Variants and configuration
| Input or variant | Behavior |
|---|---|
| Registration dates | Open/close and timezone from course |
| showCountdown | Explicit source flag |
| Now | Live clock in normal use |
State coverage
| State | Implemented behavior |
|---|---|
| Before opening | Registration may be unavailable |
| During availability | Close countdown when enabled |
| After closing | Closed registration context |
Interaction and composition
- Keep dates and timezone together.
- Use actual configured availability rather than inventing dates for a screenshot.
- Verify DST boundaries, malformed dates and expiry behavior separately.
Accessibility and readiness
No artificial registration window is introduced to fill the catalog. Date parsing and time announcements need their own tests before shipping changes; this pilot documents the source without claiming live registration reliability.
Source references
| File | Responsibility |
|---|---|
| src/components/CountdownTimer.tsx | Timed availability display |
| src/utils/parseDateWithTimezone.ts | Source date interpretation |
| src/components/courses-public/logged-out/PublicCourseView.tsx | Open/close composition |
Examples from the app
Actual TeachKit UI with Thomas McGee’s course content. Session, progress and connection specimens are simulated; no student data or live changes. Captured at 2× resolution or higher. Select an image to inspect it full size.
Related topics
Source audit: 2026-10-07 · Revision d8cf23d0a329 · Documentation v0.1