feat: add notification badge with animated ping effect to navigation bar

This commit is contained in:
Pattadon 2024-11-11 11:08:36 +07:00
parent 2d79e5d898
commit 3d77bd59ba

View File

@ -32,6 +32,9 @@ export const AuthenticatedComponents = ({ uid, avatarUrl }: AuthenticatedCompone
<Link href={"/notification"}>
<div className="relative inline-block">
<Bell className="h-6 w-6 " />
<span className="absolute -top-1 -right-1 inline-flex items-center justify-center w-4 h-4 text-xs font-bold text-white bg-red-600 rounded-full">
{displayValue}
</span>
<span className="absolute -top-1 -right-1 inline-flex items-center justify-center w-4 h-4 text-xs font-bold text-white bg-red-600 rounded-full animate-ping">
{displayValue}
</span>