Hüpfendes Benachrichtigungs-Badge

import { useState } from "react";
import { AnimatePresence, motion } from "framer-motion";
import { Bell } from "lucide-react";

const spring = { type: "spring" as const, stiffness: 300, damping: 30 };

interface NotificationBadgeProps {
  color?: string;
  count?: number;
}

export default function NotificationBadge({
  color = "#d25563",
  count = 3,
}: NotificationBadgeProps) {
  const [show, setShow] = useState(true);

  return (
    <button
      type="button"
      aria-label={show ? `${count} notificaciones` : "Mitteilungen"}
      onClick={() => setShow((s) => !s)}
      className="relative grid h-14 w-14 place-items-center rounded-full bg-white dark:bg-[#1c1c1e] text-[#1d1d1f] dark:text-[#f5f5f7] shadow-[0_1px_2px_rgba(0,0,0,0.03),0_8px_28px_rgba(0,0,0,0.05)]"
    >
      <Bell className="h-6 w-6" />
      <AnimatePresence>
        {show && (
          <motion.span
            initial={{ scale: 0, y: -10 }}
            animate={{ scale: 1, y: 0 }}
            exit={{ scale: 0 }}
            transition={spring}
            className="absolute -right-1 -top-1 grid h-6 min-w-6 place-items-center rounded-full px-1 text-[11px] font-semibold text-white"
            style={{ backgroundColor: color }}
          >
            {count}
          </motion.span>
        )}
      </AnimatePresence>
    </button>
  );
}