arrow-narrow-right-dashed-icon

1import { forwardRef, useImperativeHandle } from "react";
2import type { AnimatedIconHandle, AnimatedIconProps } from "./types";
3import { motion, useAnimate } from "motion/react";
4 
5const ArrowNarrowRightDashedIcon = forwardRef<
6  AnimatedIconHandle,
7  AnimatedIconProps
8>(
9  (
10    { size = 24, color = "currentColor", strokeWidth = 2, className = "" },
11    ref,
12  ) => {
13    const [scope, animate] = useAnimate();
14 
15    const start = async () => {
16      await animate(
17        ".arrow-group",
18        { x: [0, 4, 0] },
19        { duration: 0.5, ease: "easeInOut" },
20      );
21    };
22 
23    const stop = () => {
24      animate(".arrow-group", { x: 0 }, { duration: 0.2, ease: "easeOut" });
25    };
26 
27    useImperativeHandle(ref, () => {
28      return {
29        startAnimation: start,
30        stopAnimation: stop,
31      };
32    });
33 
34    const handleHoverStart = () => {
35      start();
36    };
37 
38    const handleHoverEnd = () => {
39      stop();
40    };
41 
42    return (
43      <motion.div
44        ref={scope}
45        onHoverStart={handleHoverStart}
46        onHoverEnd={handleHoverEnd}
47        className={`inline-flex cursor-pointer items-center justify-center ${className}`}
48      >
49        <svg
50          xmlns="http://www.w3.org/2000/svg"
51          width={size}
52          height={size}
53          viewBox="0 0 24 24"
54          fill="none"
55          stroke={color}
56          strokeWidth={strokeWidth}
57          strokeLinecap="round"
58          strokeLinejoin="round"
59        >
60          <motion.g className="arrow-group">
61            <path stroke="none" d="M0 0h24v24H0z" fill="none" />
62            <path d="M5 12h.5m3 0h1.5m3 0h6" />
63            <path d="M15 16l4 -4" />
64            <path d="M15 8l4 4" />
65          </motion.g>
66        </svg>
67      </motion.div>
68    );
69  },
70);
71 
72ArrowNarrowRightDashedIcon.displayName = "ArrowNarrowRightDashedIcon";
73 
74export default ArrowNarrowRightDashedIcon;