[FEAT] - COMPONENT -> Notification Popup Card

[Joebim]

Description

Create a notification popup card component. The card should display notification messages and can be dismissed by the user.

Acceptance Criteria

• The notification popup card displays a notification message.
• The card can be dismissed by clicking a close button.
• Smooth animations for showing and hiding the card.
• Fully responsive design, ensuring usability on mobile devices.

Requirements

• Display notification messages passed as props.
• Include a close button to dismiss the notification.
• Implement smooth animations for showing and hiding the card.
• Ensure the card is fully responsive for mobile, adjusting layout and functionality as needed.

Props

NotificationPopupCard

• message: string - The notification message to display.
• onClose: function - Function to call when the notification is dismissed.

Tests

• Verify the notification message is displayed correctly.
• Verify the close button dismisses the notification.
• Verify smooth animations for showing and hiding the card.
• Ensure the card is fully responsive on mobile devices, maintaining usability and accessibility.

Tasks

• Create NotificationPopupCard component.
• Implement the close button for dismissing the notification.
• Add smooth animations for showing and hiding the card.
• Ensure the card is fully responsive for mobile devices, adjusting layout and functionality as needed.

Links

• Figma Link: https://www.figma.com/design/7Jl49r5rLPVzqorAVLKF1x/Team-Language-Learning-AI?node-id=1495-9858&t=xEektLQWY8ZSAY8m-4)](https://www.figma.com/design/7Jl49r5rLPVzqorAVLKF1x/Team-Language-Learning-AI?node-id=1495-4058&t=xEektLQWY8ZSAY8m-4
• Images:

[mminuwaali]

@Joebim This is is the same as the one assigned to me Notification Card