FRONTEND — Create Share Options Bottom Sheet

[A6dulmalik]

Description: Build the bottom sheet that appears after opening the share card.

Figma Access

UI Reference
should be added

Location:

frontend/components/ShareOptionsSheet.tsx

Existing Components to Use:

UI components from components/ui/, icons from public/

Navigation:

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

Requirements:

Props

• isOpen: boolean
• onClose: () => void
• onShare: (platform: string) => void

Options

• Contacts
• Telegram
• Twitter
• Whatsapp
• E-mail
• More

Behavior

• Slides from bottom
• Dark background
• Icons in circular buttons
• Close button on left

Acceptance Criteria

• Smooth animation
• Mobile friendly
• Keyboard accessible
• Reusable bottom sheet