Create Notification system

[1AyaNabil1]

Requirements

1. Notification Types

   • Success notifications (e.g., "Quote generated successfully")
   • Error notifications (e.g., "Failed to generate quote")
   • Info notifications (e.g., "Generating your quote...")
   • Warning notifications (e.g., "Rate limit approaching")

2. Features

   • Auto-dismiss after configurable timeout (default: 3-5 seconds)
   • Manual dismiss option with close button
   • Stack multiple notifications
   • Smooth animations (fade in/out, slide)
   • Responsive design that works on mobile and desktop
   • Accessible (ARIA labels, keyboard navigation)

3. Technical Considerations

   • Position: Top-right or top-center of viewport
   • Non-blocking UI (doesn't prevent user interaction)
   • Queue system for multiple simultaneous notifications
   • Customizable styling to match Swan's design system
   • Consider using existing library (react-toastify, react-hot-toast) or custom implementation

4. Integration Points

   • Quote generation success/failure
   • Copy to clipboard confirmation
   • API errors
   • Network connectivity issues
   • Any async operations

5. Acceptance Criteria

   • Notification component created with proper styling
   • Success, error, info, and warning variants implemented
   • Auto-dismiss functionality working
   • Manual close button functional
   • Notifications are accessible (screen reader compatible)
   • Responsive on mobile devices
   • Integrated with existing quote generation flow
   • Documentation added for usage

6. Design Notes

   • Should align with Swan's existing design aesthetic (Crimson Text + Poppins fonts, elegant/minimalist style).

[adityaaman052]

can you describe what actually the issuse is?

[1AyaNabil1]

can you describe what actually the issuse is?

I've updated the decribtion :)

[justynakwasniak]

hi, i'd like work with this issue ; )

[1AyaNabil1]

hi, i'd like work with this issue ; )

You are very welcome if you need any help just sent me a message :)