lu-a-arrow-up

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 AArrowUpIconHandle {
20 startAnimation: () => void;
21 stopAnimation: () => void;
22}
23 
24interface AArrowUpIconProps 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 AArrowUpIcon = forwardRef<AArrowUpIconHandle, AArrowUpIconProps>(
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 groupControls = useAnimation();
55  const headControls = useAnimation();
56  const stemControls = useAnimation();
57  const diagControls = useAnimation();
58  const barControls = useAnimation();
59  const reduced = useReducedMotion();
60  const isControlled = useRef(false);
61 
62  useImperativeHandle(ref, () => {
63   isControlled.current = true;
64   return {
65    startAnimation: () => {
66     if (reduced) {
67      groupControls.start("normal");
68      headControls.start("normal");
69      stemControls.start("normal");
70      diagControls.start("normal");
71      barControls.start("normal");
72     } else {
73      groupControls.start("animate");
74      headControls.start("animate");
75      stemControls.start("animate");
76      diagControls.start("animate");
77      barControls.start("animate");
78     }
79    },
80    stopAnimation: () => {
81     groupControls.start("normal");
82     headControls.start("normal");
83     stemControls.start("normal");
84     diagControls.start("normal");
85     barControls.start("normal");
86    },
87   };
88  });
89 
90  const handleEnter = useCallback(
91   (e?: React.MouseEvent<HTMLDivElement>) => {
92    if (!isAnimated || reduced) return;
93    if (!isControlled.current) {
94     groupControls.start("animate");
95     headControls.start("animate");
96     stemControls.start("animate");
97     diagControls.start("animate");
98     barControls.start("animate");
99    } else onMouseEnter?.(e as any);
100   },
101   [
102    groupControls,
103    headControls,
104    stemControls,
105    diagControls,
106    barControls,
107    reduced,
108    onMouseEnter,
109    isAnimated,
110   ],
111  );
112 
113  const handleLeave = useCallback(
114// … truncated