arrow-back-icon

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