<div className="border border-border rounded-xl overflow-hidden divide-y divide-border">
  <SocialNotificationItem notification={{ type: 'LIKE',   isRead: false, actor: user, message: 'liked your post', ... }} />
  <SocialNotificationItem notification={{ type: 'FOLLOW', isRead: true,  actor: user, message: 'started following you', ... }} />
</div>

{(['LIKE', 'COMMENT', 'FOLLOW', 'MENTION', 'SHARE'] as const).map((type) => (
  <SocialNotificationItem key={type} notification={{ type, isRead: false, actor: user, ... }} />
))}