lu-badge-cent

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 BadgeCentIconHandle {
20 startAnimation: () => void;
21 stopAnimation: () => void;
22}
23 
24interface BadgeCentIconProps 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 BadgeCentIcon = forwardRef<BadgeCentIconHandle, BadgeCentIconProps>(
41 (
42  {
43   onMouseEnter,
44   onMouseLeave,
45   className,
46   size = 24,
47   duration = 1,
48   isAnimated = true,
49   color,
50   ...props
51  },
52  ref,
53 ) => {
54  const outerControls = useAnimation();
55  const lineControls = useAnimation();
56  const semiControls = useAnimation();
57  const reduced = useReducedMotion();
58  const isControlled = useRef(false);
59 
60  useImperativeHandle(ref, () => {
61   isControlled.current = true;
62   return {
63    startAnimation: () => {
64     if (reduced) {
65      outerControls.start("normal");
66      lineControls.start("normal");
67      semiControls.start("normal");
68     } else {
69      outerControls.start("animate");
70      lineControls.start("animate");
71      semiControls.start("animate");
72     }
73    },
74    stopAnimation: () => {
75     outerControls.start("normal");
76     lineControls.start("normal");
77     semiControls.start("normal");
78    },
79   };
80  });
81 
82  const handleEnter = useCallback(
83   (e?: React.MouseEvent<HTMLDivElement>) => {
84    if (!isAnimated || reduced) return;
85    if (!isControlled.current) {
86     outerControls.start("animate");
87     lineControls.start("animate");
88     semiControls.start("animate");
89    } else onMouseEnter?.(e as any);
90   },
91   [
92    outerControls,
93    lineControls,
94    semiControls,
95    reduced,
96    onMouseEnter,
97    isAnimated,
98   ],
99  );
100 
101  const handleLeave = useCallback(
102   (e?: React.MouseEvent<HTMLDivElement>) => {
103    if (!isControlled.current) {
104     outerControls.start("normal");
105     lineControls.start("normal");
106     semiControls.start("normal");
107    } else onMouseLeave?.(e as any);
108   },
109   [outerControls, lineControls, semiControls, onMouseLeave],
110  );
111 
112  const outerVariants: Variants = {
113   normal: { scale: 1, rotate: 0 },
114   animate: {
115    scale: [1, 1.02, 1],
116// … truncated