Notification Bell

Objective: Implement a notification bell component that shows an unread notification count and displays a list of notifications on click.

Instructions:

1. Create a notification bell icon that displays the number of unread notifications.
2. Clicking the bell should open a list of notifications.
3. Include two buttons for different types of notifications (e.g., "Messages" and "Alerts"). Clicking these buttons should simulate adding new notifications of the respective type.
4. Add a button to clear all notifications under the list of notifications.

Requirements:

• The notification bell should display an unread count.
• Clicking the bell should show a list of notifications.
• The "Messages" and "Alerts" buttons should simulate adding a new notification of the corresponding type.
• Add a "Clear All" button to remove all notifications.

Hints:

1. You can style the notification list as a dropdown or a modal that opens when the bell is clicked.
2. Use conditional rendering to toggle between showing and hiding the notification list.

Bonus:

• Add animations or transitions when the notification list opens or closes.
• Allow users to remove individual notifications from the list.
• Add visual difference between notification types.