Annual Summary Screen
Component Detail
Description
Full-screen animated presentation that renders the peer mentor's yearly review as swipeable slides in a Spotify Wrapped-style format. Each slide showcases a different statistic or milestone with motion graphics optimized for social sharing aspect ratios. Provides non-animated fallback for users with motion sensitivity preferences (prefers-reduced-motion) to maintain WCAG 2.2 AA compliance.
annual-summary-screen
Responsibilities
- Render swipeable animated slide deck for yearly statistics
- Support non-animated fallback mode for motion-sensitive users
- Trigger share flow for individual slides or full summary
- Display loading state while summary is being fetched
- Handle empty state when no summary is available yet
Interfaces
display(summary: AnnualSummary): void
onShare(slide: SummarySlide): void
onClose(): void
Relationships
Dependencies (2)
Components this component depends on
Sub-Components (2)
Reusable animated card widget that renders a single statistic or milestone slide. Handles animation orchestration, typography, and icon display for each slide type (activities, hours, contacts, geographic reach, badges earned).
- Render a single statistic with animated counter and icon
- Support multiple slide layout templates (number, map, badge, milestone)
- Respect reduced-motion preference by disabling animations
Bottom sheet overlay that presents sharing options (copy link, social media, image export) when the user initiates a share action from any slide.
- Display share target options in a bottom sheet
- Trigger platform share sheet with generated asset
- Show loading state during image rendering
Related Data Entities (2)
Data entities managed by this component