feat: add StreakSummaryCard component to display user streak informat…

[PeterOche]

…ion.

closes #271

Description

This PR implements the reusable StreakSummaryCard component as requested. The component displays the user's current streak count and flame icon, supporting both active and inactive states with a responsive dark-themed design.

Changes

• Created frontend/components/StreakSummaryCard.tsx.
• Implemented StreakSummaryCardProps for streakCount, isActive, and className.
• Added reactive styling for active (yellow) vs. inactive (grey) states.
• Utilized next/image for the flame icon with a CSS grayscale filter for the inactive state.
• Ensured full responsiveness using Tailwind CSS.
• Integrated with existing design tokens (font-nunito, dark theme background).

Requirements Checklist

• Component is reusable
• Supports active/inactive states
• Matches design spacing and typography
• Proper TypeScript typing
• Responsive design

UI Overview

State	Behavior
Active	Flame icon in full color, streak number in yellow badge, "day streak!" text in white.
Inactive	Flame icon greyscale (50% opacity), streak number in grey badge, "day streak!" text dimmed.

How to Test

1. Import the component into any page:

   import { StreakSummaryCard } from "@/components/StreakSummaryCard";

2. Render with different props:

   <StreakSummaryCard streakCount={5} isActive={true} />
   <StreakSummaryCard streakCount={0} isActive={false} />

3. Verify visual states and responsiveness on mobile/desktop.

Notes

• The component is built to be standalone and reusable.
• Verified with npx tsc --noEmit --project tsconfig.json (0 errors in StreakSummaryCard.tsx).
• Note for reviewers: The project currently has a pre-existing build error in app/page.tsx due to a missing framer-motion dependency, which is unrelated to these changes.

Closes #271

[drips-wave]

@PeterOche Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits