\n \n 🔔 Notifications\n {unreadCount > 0 && (\n \n {unreadCount}\n \n )}\n \n\n {isOpen && (\n \n \n

Notifications

\n {unreadCount > 0 && (\n {\n e.stopPropagation();\n markAllAsRead();\n }}\n style={{\n background: \"none\",\n border: \"none\",\n color: \"white\",\n cursor: \"pointer\",\n fontSize: \"0.8rem\",\n textDecoration: \"underline\",\n }}\n >\n Mark all as read\n \n )}\n

\n\n {isLoading\n ?

Loading notifications...

\n : error\n ?

{error}

\n : notifications.length === 0\n ? (\n

\n No notifications to display\n

\n )\n : (\n

\n {notifications.map(notification => (\n handleNotificationClick(notification)}\n style={{\n padding: \"12px 16px\",\n borderBottom: `1px solid ${BRAND_COLORS.lightGray}`,\n backgroundColor: notification.is_read ? \"white\" : BRAND_COLORS.lightBlue,\n cursor: \"pointer\",\n transition: \"background-color 0.2s ease\",\n \":hover\": {\n backgroundColor: BRAND_COLORS.lightGray,\n },\n }}\n >\n

\n {getNotificationIcon(notification.type)}\n

\n {notification.message}\n

\n \n {new Date(notification.created_at).toLocaleString()}\n

\n {!notification.is_read && (\n \n )}\n

\n \n ))}\n \n )}\n \n )}\n \n );\n};\n\nexport default NotificationComponent;","deleted","label",[172,154],"components","permalink","https://www.val.town/x/solomonferede/EEPPortal/code/components/Notifications.tsx","extension","actionData","errors"]