Notification Bell

React.js

medium

30 mins

Create a notification bell icon that displays a badge with the number of unread notifications and shows a dropdown list of notifications when clicked.

Requirements:

Display a bell icon with a notification badge showing unread count
Show dropdown list of notifications when bell is clicked
Display notification details (title, message, timestamp)
Mark notifications as read when clicked
Update badge count when notifications are read
Close dropdown when clicking outside or on bell again
Show different styles for read/unread notifications
Include "Mark all as read" button in dropdown
Handle empty notification state
Use proper accessibility attributes for screen readers

Elements and Attributes for Testing:

Bell Icon - Must have data-testid="notification-bell" and onClick handler
Badge - Must display unread count and have data-testid="notification-badge"
Dropdown - Must have data-testid="notification-dropdown" when open
Notification Items - Must have data-testid="notification-item" and onClick handler
Mark All Button - Must contain text "Mark all as read" and have onClick handler
Empty State - Must show "No notifications" when array is empty
Read/Unread States - Must apply different styling based on read status