Frontend Duels UI (Challenge Friend, Pending/Active States)

[yashjagtap23]

Summary

• Build the Duels frontend flow that allows users to challenge friends, track pending duels, and view active duel states. Connect to the backend once endpoints are confirmed.

---

Tasks

• Create DuelsScreen.tsx and supporting components (ChallengeCard, DuelStatusCard).
• Display friends list for selecting opponents.
• Show sections for "Pending Duels" and "Active Duels".
• Add placeholder buttons and modals for challenge actions.
• Integrate mock data until backend endpoints are live.

---

Acceptance Criteria

• User can view, create, and track mock duels in the UI.
• Transitions between pending and active states displayed properly.
• Layout matches Figma design for duels.
• Ready to connect with backend API once implemented.

---

Notes

• Use modular components to support backend integration later.

[yashjagtap23]

https://www.figma.com/design/JAvelsDJItiuKNxk56Bj77/HackIllinois-2026--Mobile-App?node-id=661-605&p=f&t=Ad5MnO9viZTFxlwW-0