FRONTEND - Create Streak Summary Card Component

[A6dulmalik]

Description

Build a reusable component that displays the user's current streak count and flame icon. This appears at the top of the Streak screen.

Figma Access

UI Reference

Location:

frontend/components/StreakSummaryCard.tsx

Existing Components to Use: public/flame.png (flame icon asset)

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

Requirements:

Props

• streakCount: number
• isActive?: boolean
• className?: string

UI Behavior

• Shows streak number inside a rounded badge
• Shows "day streak!" text
• Flame icon changes color based on streak state: (adhere to figma/css colors)
  • inactive → grey
  • active → yellow
• Card background matches dark theme
• Fully responsive

Acceptance Criteria

• Component is reusable
• Supports active/inactive states
• Matches design spacing and typography
• Proper TypeScript typing
• Storybook (if available)