๐ฉโโ๏ธ
Commander Eve
Mission Briefing
Mission
Agent, every frontend system starts with components, and every component starts with its Props contract. Your mission: define a TypeScript interface for UserCard props with required fields (name, role, xp), optional fields (avatar), and default values (isOnline). Then implement the component using destructuring. This is the foundation of every UI architecture.
Objectives
- Define UserCardProps interface
- Use optional (?) and default props
- Destructure props in function signature
- Handle missing avatar with initials
UserCard.tsx
Files
UserCard.tsx
UserCard.tsx
Test Results
test_interface
Props interface defined
test_required
Required props present
test_optional
Avatar is optional