arrow-big-up

1"use client";
2 
3import type { Variants } from "motion/react";
4import { motion, useAnimation } from "motion/react";
5import type { HTMLAttributes } from "react";
6import { forwardRef, useCallback, useImperativeHandle, useRef } from "react";
7 
8import { cn } from "@/lib/utils";
9 
10export interface ArrowBigUpIconHandle {
11  startAnimation: () => void;
12  stopAnimation: () => void;
13}
14 
15interface ArrowBigUpIconProps extends HTMLAttributes<HTMLDivElement> {
16  size?: number;
17}
18 
19const PATH_VARIANTS: Variants = {
20  normal: { d: "M9 18v-6H5l7-7 7 7h-4v6H9z", translateY: 0 },
21  animate: {
22    d: "M9 18v-6H5l7-7 7 7h-4v6H9z",
23    translateY: [0, -3, 0],
24    transition: {
25      duration: 0.4,
26    },
27  },
28};
29 
30const ArrowBigUpIcon = forwardRef<ArrowBigUpIconHandle, ArrowBigUpIconProps>(
31  ({ onMouseEnter, onMouseLeave, className, size = 28, ...props }, ref) => {
32    const controls = useAnimation();
33    const isControlledRef = useRef(false);
34 
35    useImperativeHandle(ref, () => {
36      isControlledRef.current = true;
37      return {
38        startAnimation: () => controls.start("animate"),
39        stopAnimation: () => controls.start("normal"),
40      };
41    });
42 
43    const handleMouseEnter = useCallback(
44      (e: React.MouseEvent<HTMLDivElement>) => {
45        if (isControlledRef.current) {
46          onMouseEnter?.(e);
47        } else {
48          controls.start("animate");
49        }
50      },
51      [controls, onMouseEnter]
52    );
53 
54    const handleMouseLeave = useCallback(
55      (e: React.MouseEvent<HTMLDivElement>) => {
56        if (isControlledRef.current) {
57          onMouseLeave?.(e);
58        } else {
59          controls.start("normal");
60        }
61      },
62      [controls, onMouseLeave]
63    );
64 
65    return (
66      <div
67        className={cn(className)}
68        onMouseEnter={handleMouseEnter}
69        onMouseLeave={handleMouseLeave}
70        {...props}
71      >
72        <svg
73          fill="none"
74          height={size}
75          stroke="currentColor"
76          strokeLinecap="round"
77          strokeLinejoin="round"
78          strokeWidth="2"
79          viewBox="0 0 24 24"
80          width={size}
81          xmlns="http://www.w3.org/2000/svg"
82        >
83          <motion.path
84            animate={controls}
85            d="M9 18v-6H5l7-7 7 7h-4v6H9z"
86            variants={PATH_VARIANTS}
87          />
88        </svg>
89      </div>
90    );
91  }
92);
93 
94ArrowBigUpIcon.displayName = "ArrowBigUpIcon";
95 
96export { ArrowBigUpIcon };