refactor: add nice enter animation for notification badge

coder · BrunoQuaresma · Mar 27, 2025 · Mar 26, 2025 · Mar 26, 2025 · Mar 26, 2025
commit da3372dded049557e33f1c3e384e8c2465dd725f
@@ -2,6 +2,7 @@ import { Button, type ButtonProps } from "components/Button/Button";
 import { BellIcon } from "lucide-react";
 import { forwardRef } from "react";
 import { UnreadBadge } from "./UnreadBadge";
+import { cn } from "utils/cn";
 
 type InboxButtonProps = {
 	unreadCount: number;
@@ -21,7 +22,11 @@ export const InboxButton = forwardRef<HTMLButtonElement, InboxButtonProps>(
 				{unreadCount > 0 && (
 					<UnreadBadge
 						count={unreadCount}
-						className="absolute top-0 right-0 -translate-y-1/2 translate-x-1/2"
+						className={cn([
+							"[--offset:calc(var(--unread-badge-size)/2)]",
+							"absolute top-0 right-0 -mr-[--offset] -mt-[--offset]",
+							"animate-in fade-in zoom-in duration-200",
+						])}
 					/>
 				)}
 			</Button>

@@ -13,7 +13,8 @@ export const UnreadBadge: FC<UnreadBadgeProps> = ({
 	return (
 		<span
 			className={cn([
-				"flex min-w-[18px] h-[18px] w-fit px-1 rounded text-2xs items-center justify-center",
+				"[--unread-badge-size:18px] min-w-[--unread-badge-size] h-[--unread-badge-size]",
+				"flex w-fit px-1 rounded text-2xs items-center justify-center",
 				"bg-surface-sky text-highlight-sky",
 				className,
 			])}