arrow-narrow-down-dashed-icon

1import { forwardRef, useImperativeHandle } from "react";
2import type { AnimatedIconHandle, AnimatedIconProps } from "./types";
3import { motion, useAnimate } from "motion/react";
4 
5const ArrowNarrowDownDashedIcon = 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        {
19          y: [0, 4, 0],
20        },
21        {
22          duration: 0.5,
23          ease: "easeInOut",
24        },
25      );
26    };
27 
28    const stop = () => {
29      animate(".arrow-group", { y: 0 }, { duration: 0.2, ease: "easeOut" });
30    };
31 
32    useImperativeHandle(ref, () => {
33      return {
34        startAnimation: start,
35        stopAnimation: stop,
36      };
37    });
38 
39    const handleHoverStart = () => {
40      start();
41    };
42 
43    const handleHoverEnd = () => {
44      stop();
45    };
46 
47    return (
48      <motion.div
49        ref={scope}
50        onHoverStart={handleHoverStart}
51        onHoverEnd={handleHoverEnd}
52        className={`inline-flex cursor-pointer items-center justify-center ${className}`}
53      >
54        <svg
55          xmlns="http://www.w3.org/2000/svg"
56          width={size}
57          height={size}
58          viewBox="0 0 24 24"
59          fill="none"
60          stroke={color}
61          strokeWidth={strokeWidth}
62          strokeLinecap="round"
63          strokeLinejoin="round"
64        >
65          <motion.g className="arrow-group">
66            <path d="M12 5v.5" />
67            <path d="M12 8.5v1.5" />
68            <path d="M12 13v6" />
69 
70            <path d="M16 15l-4 4" />
71            <path d="M8 15l4 4" />
72          </motion.g>
73        </svg>
74      </motion.div>
75    );
76  },
77);
78 
79ArrowNarrowDownDashedIcon.displayName = "ArrowNarrowDownDashedIcon";
80 
81export default ArrowNarrowDownDashedIcon;