arrow-big-right-icon

1import { forwardRef, useImperativeHandle } from "react";
2import type { AnimatedIconHandle, AnimatedIconProps } from "./types";
3import { motion, useAnimate } from "motion/react";
4 
5const ArrowBigRightIcon = forwardRef<AnimatedIconHandle, AnimatedIconProps>(
6  (
7    { size = 24, color = "currentColor", strokeWidth = 2, className = "" },
8    ref,
9  ) => {
10    const [scope, animate] = useAnimate();
11 
12    const start = async () => {
13      animate(".arrow", { x: 4 }, { duration: 0.3, ease: "easeOut" });
14    };
15 
16    const stop = () => {
17      animate(".arrow", { x: 0 }, { duration: 0.2, ease: "easeInOut" });
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={color}
46        strokeWidth={strokeWidth}
47        strokeLinecap="round"
48        strokeLinejoin="round"
49        className={`cursor-pointer ${className}`}
50      >
51        <motion.path
52          className="arrow"
53          d="M11 9a1 1 0 0 0 1-1V5.061a1 1 0 0 1 1.811-.75l6.836 6.836a1.207 1.207 0 0 1 0 1.707l-6.836 6.835a1 1 0 0 1-1.811-.75V16a1 1 0 0 0-1-1H5a1 1 0 0 1-1-1v-4a1 1 0 0 1 1-1z"
54        />
55      </motion.svg>
56    );
57  },
58);
59 
60ArrowBigRightIcon.displayName = "ArrowBigRightIcon";
61 
62export default ArrowBigRightIcon;