arrow-big-down

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