FRONTEND — Create Share Streak Card Component (Modal)

[A6dulmalik]

Description: Build the share preview card that appears when the share icon is clicked. This is the centered white card in the design.

Figma Access

UI Reference

Location:

frontend/components/ShareStreakCard.tsx

Existing Components to Use:

public/flame.png (flame icon asset), UI components from components/ui/

Navigation:

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

Requirements:

Props

• streakCount: number
• username?: string
• onClose?: () => void

UI

• White rounded card
• Large flame icon
• Text: "I'm on a [X] day streak!"
• App name at bottom
• Subtle shadow
• Centered modal behavior

Acceptance Criteria

• Accessible modal
• Proper overlay backdrop
• Matches spacing
• Responsive
• Reusable