Function NotificationItem

web/components/notifications/NotificationItem.tsx:31–99

({ notification, onMarkRead }: NotificationItemProps)

} as const;

export function NotificationItem({ notification, onMarkRead }: NotificationItemProps) {
  const config = CATEGORY_CONFIG[notification.category];
  const Icon = config.icon;

  const handleClick = () => {
    if (!notification.read) {
      onMarkRead(notification.id);
    }
  };

  const content = (
    <div
      className={cn(
        "flex items-start gap-3 px-4 py-3 transition-colors cursor-pointer",
        "hover:bg-surface-800/60",
        !notification.read && "bg-surface-800/30"
      )}
      onClick={handleClick}
    >
      {/* Icon */}
      <div
        className={cn(
          "mt-0.5 shrink-0 w-7 h-7 rounded-full flex items-center justify-center",
          config.bgColor
        )}
      >
        <Icon className={cn("w-3.5 h-3.5", config.iconColor)} />
      </div>

      {/* Content */}
      <div className="flex-1 min-w-0">
        <div className="flex items-start justify-between gap-2">
          <p
            className={cn(
              "text-sm leading-snug",
              notification.read ? "text-surface-300" : "text-surface-100 font-medium"
            )}
          >
            {notification.title}
          </p>
          <div className="flex items-center gap-1.5 shrink-0">
            {!notification.read && (
              <span className="w-1.5 h-1.5 rounded-full bg-brand-500 mt-1" />
            )}
            {notification.link && (
              <ExternalLink className="w-3 h-3 text-surface-500" />
            )}
          </div>
        </div>
        <p className="text-xs text-surface-500 mt-0.5 leading-relaxed line-clamp-2">
          {notification.description}
        </p>
        <p className="text-xs text-surface-600 mt-1">
          {formatDate(notification.createdAt)}
        </p>
      </div>
    </div>
  );