Notification Badge

import { NotificationBadge } from "@/components/ui/notification-badge";

export default function Example() {
  return <NotificationBadge />;
}

import { forwardRef } from "react";
import { cn } from "@/lib/utils";

const NotificationBadge = forwardRef(({ className, count, max = 99, dot, children, ...props }, ref) => (
  <div ref={ref} className={cn("relative inline-flex", className)} {...props}>
    {children}
    {dot ? (
      <span className="absolute -right-1 -top-1 h-2.5 w-2.5 rounded-full bg-destructive" />
    ) : count != null && count > 0 ? (
      <span className="absolute -right-2 -top-2 flex h-5 min-w-5 items-center justify-center rounded-full bg-destructive px-1 text-[10px] font-bold text-destructive-foreground">
        {count > max ? `${max}+` : count}
      </span>
    ) : null}
  </div>
));
NotificationBadge.displayName = "NotificationBadge";

export { NotificationBadge };