Keyframes

import { useEffect, useRef } from 'react';
import { useAnimate, useReducedMotion } from 'motion/react';

// The angle at each keyframe, and when (0 to 1) each one is reached.
const ROTATE = [0, 14, -12, 8, -4, 0, 0];
const TIMES = [0, 0.15, 0.3, 0.45, 0.6, 0.75, 1];

export function NotificationBell({ unread }: { unread: number }) {
  const [scope, animate] = useAnimate<HTMLSpanElement>();
  const reduceMotion = useReducedMotion();
  const previous = useRef(unread);

  // Ring once each time the unread count goes up.
  useEffect(() => {
    const hasNew = unread > previous.current;
    previous.current = unread;
    if (!hasNew || reduceMotion) return;
    animate(
      scope.current,
      { rotate: ROTATE },
      { duration: 0.9, times: TIMES, ease: 'easeInOut' }
    );
  }, [unread, reduceMotion, animate, scope]);

  return (
    <button
      type='button'
      aria-label={`Notifications, ${unread} unread`}
      className='grid size-10 place-items-center rounded-full hover:bg-muted'
    >
      {/* Swing from the top, where a bell hangs. */}
      <span ref={scope} className='block origin-top'>
        <svg
          viewBox='0 0 24 24'
          fill='none'
          stroke='currentColor'
          strokeWidth={2}
          className='size-5'
          aria-hidden
        >
          <path d='M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9' />
          <path d='M10.3 21a1.94 1.94 0 0 0 3.4 0' />
        </svg>
      </span>
    </button>
  );
}