FRONTEND - Create Streak Calendar Component

[A6dulmalik]

Description: Build the monthly streak calendar grid using the Day Cell component.

Figma Access

UI Reference

Location:

frontend/components/WeeklyCalendar.tsx (enhance existing component) or create new frontend/components/StreakCalendar.tsx

Existing Components to Use: StreakDayIndicator.tsx (from Issue 2)

Navigation: This component will be accessed when clicking the streak fire icon on the navbar, which navigates to /streak page.

Requirements:

Props

• currentMonth: Date
• streakData: Record<string, Status>
• onMonthChange?: (date: Date) => void

Features

• Displays:
  • Month header
  • Weekday labels
  • Calendar grid
• Previous/Next month navigation
• Proper month calculation
• Handles different month lengths
• Week starts Monday (per design)

Acceptance Criteria

• Month navigation works
• Grid aligns correctly
• Uses Day Cell component
• Responsive
• No hardcoded dates