FRONTEND - Create Calendar Day Cell Component

[A6dulmalik]

Description:

Build a reusable day indicator used inside the streak calendar grid.

Figma Access

UI Reference

should be added

Location:

frontend/components/StreakDayIndicator.tsx

Existing Components to Use:

public/fire.svg (fire icon asset)

Navigation:

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

Requirements:

Props

• status: 'empty' | 'completed' | 'streak'
• isToday?: boolean

States

• Empty
  • grey circle
• Completed
  • yellow circle
• Streak
  • yellow circle with flame icon inside
  • optional highlighted background for streak run

Acceptance Criteria

• Perfect circle
• Accessible
• Reusable
• Handles all visual states
• No layout shift