arrow-big-down-icon

1import { forwardRef, useImperativeHandle } from "react";
2import type { AnimatedIconHandle, AnimatedIconProps } from "./types";
3import { motion, useAnimate } from "motion/react";
4 
5const ArrowBigDownIcon = forwardRef<AnimatedIconHandle, AnimatedIconProps>(
6  (
7    { size = 40, className = "", color = "currentColor", strokeWidth = 2 },
8    ref,
9  ) => {
10    const [scope, animate] = useAnimate();
11 
12    const start = async () => {
13      animate(scope.current, { y: [0, 4] }, { duration: 0.5 });
14    };
15 
16    const stop = async () => {
17      animate(scope.current, { y: 0 }, { duration: 0.3 });
18    };
19 
20    useImperativeHandle(ref, () => {
21      return {
22        startAnimation: start,
23        stopAnimation: stop,
24      };
25    });
26 
27    const handleHoverStart = () => {
28      start();
29    };
30 
31    const handleHoverEnd = () => {
32      stop();
33    };
34 
35    return (
36      <motion.svg
37        ref={scope}
38        onHoverStart={handleHoverStart}
39        onHoverEnd={handleHoverEnd}
40        xmlns="http://www.w3.org/2000/svg"
41        width={size}
42        height={size}
43        viewBox="0 0 24 24"
44        fill="none"
45        stroke="currentColor"
46        strokeWidth={strokeWidth}
47        strokeLinecap="round"
48        strokeLinejoin="round"
49        color={color}
50        className={`cursor-pointer ${className}`}
51      >
52        <path d="M15 11a1 1 0 0 0 1 1h2.939a1 1 0 0 1 .75 1.811l-6.835 6.836a1.207 1.207 0 0 1-1.707 0L4.31 13.81a1 1 0 0 1 .75-1.811H8a1 1 0 0 0 1-1V5a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1z" />
53      </motion.svg>
54    );
55  },
56);
57 
58ArrowBigDownIcon.displayName = "ArrowBigDownIcon";
59 
60export default ArrowBigDownIcon;