hu-notification

1"use client";
2 
3import { cn } from "@/lib/utils";
4import type { Variants } from "motion/react";
5import {
6 LazyMotion,
7 domMin,
8 m,
9 useAnimation,
10 useReducedMotion,
11} from "motion/react";
12import {
13 forwardRef,
14 useCallback,
15 useImperativeHandle,
16 useRef,
17 type HTMLAttributes,
18} from "react";
19export interface NotificationIconHandle {
20 startAnimation: () => void;
21 stopAnimation: () => void;
22}
23 
24interface NotificationIconProps extends Omit<
25 HTMLAttributes<HTMLDivElement>,
26 | "color"
27 | "onDrag"
28 | "onDragStart"
29 | "onDragEnd"
30 | "onAnimationStart"
31 | "onAnimationEnd"
32 | "onAnimationIteration"
33> {
34 size?: number;
35 duration?: number;
36 isAnimated?: boolean;
37 color?: string;
38}
39 
40const NotificationIcon = forwardRef<
41 NotificationIconHandle,
42 NotificationIconProps
43>(
44 (
45  {
46   onMouseEnter,
47   onMouseLeave,
48   className,
49   size = 24,
50   duration = 1,
51   isAnimated = true,
52   color,
53   ...props
54  },
55  ref,
56 ) => {
57  const controls = useAnimation();
58  const reduced = useReducedMotion();
59  const isControlled = useRef(false);
60 
61  useImperativeHandle(ref, () => {
62   isControlled.current = true;
63   return {
64    startAnimation: () =>
65     reduced ? controls.start("normal") : controls.start("animate"),
66    stopAnimation: () => controls.start("normal"),
67   };
68  });
69 
70  const handleEnter = useCallback(
71   (e?: React.MouseEvent<HTMLDivElement>) => {
72    if (!isAnimated || reduced) return;
73    if (!isControlled.current) controls.start("animate");
74    else onMouseEnter?.(e as any);
75   },
76   [controls, reduced, isAnimated, onMouseEnter],
77  );
78 
79  const handleLeave = useCallback(
80   (e: React.MouseEvent<HTMLDivElement>) => {
81    if (!isControlled.current) controls.start("normal");
82    else onMouseLeave?.(e as any);
83   },
84   [controls, onMouseLeave],
85  );
86 
87  const bellVariants: Variants = {
88   normal: { rotate: 0 },
89   animate: {
90    rotate: [0, 7, -18, 14, -9, 5, -2, 0],
91    transition: {
92     duration: 1.3 * duration,
93     ease: "easeInOut",
94     times: [0, 0.09, 0.26, 0.45, 0.62, 0.78, 0.9, 1],
95    },
96   },
97  };
98 
99  const clapperVariants: Variants = {
100   normal: { x: 0 },
101   animate: {
102    x: [0, 1.5, -5, 4, -2.5, 1.5, -1, 0],
103    transition: {
104     duration: 1.3 * duration,
105     ease: "easeInOut",
106     times: [0, 0.09, 0.26, 0.45, 0.62, 0.78, 0.9, 1],
107     delay: 0.08 * duration,
108    },
109   },
110  };
111 
112  return (
113   <LazyMotion features={domMin} strict>
114    <m.div
115     className={cn("relative inline-flex", className)}
116     onMouseEnter={handleEnter}
117     onMouseLeave={handleLeave}
118// … truncated