// Plaaayground v2 — NotificationBadge
// Blueprint: 01 — Dot or numeric count badge positioned on children

import { AnimatePresence, motion } from "framer-motion";
import { spring } from "@/lib/motion";
import { cva, type VariantProps } from "class-variance-authority";
import { cn } from "@/lib/utils";

const badgeVariants = cva(
  "absolute flex items-center justify-center rounded-full bg-destructive text-white font-semibold",
  {
    variants: {
      variant: {
        dot: "w-2 h-2 -top-0.5 -right-0.5",
        count: "min-w-[18px] h-[18px] px-1 text-[10px] -top-1.5 -right-1.5",
      },
      size: {
        sm: "",
        md: "",
      },
    },
    defaultVariants: {
      variant: "dot",
      size: "md",
    },
  }
);

export interface NotificationBadgeProps
  extends VariantProps<typeof badgeVariants> {
  count?: number;
  max?: number;
  show?: boolean;
  children: React.ReactNode;
  className?: string;
}

export function NotificationBadge({
  count = 0,
  max = 99,
  show = true,
  variant = "dot",
  children,
  className,
}: NotificationBadgeProps) {
  const displayCount = count > max ? `${max}+` : count;
  const shouldShow = show && (variant === "dot" || count > 0);

  return (
    <div className={cn("relative inline-flex", className)}>
      {children}
      <AnimatePresence>
        {shouldShow && (
          <motion.span
            className={cn(badgeVariants({ variant }))}
            initial={{ scale: 0, opacity: 0 }}
            animate={{ scale: 1, opacity: 1 }}
            exit={{ scale: 0, opacity: 0 }}
            transition={spring.snappy}
            aria-label={variant === "count" ? `${displayCount} notifications` : "New notification"}
          >
            {variant === "count" && displayCount}
          </motion.span>
        )}
      </AnimatePresence>
    </div>
  );
}
NotificationBadge

Source Code
