arrow-right

1"use client";
2 
3import type { Variants } from "motion/react";
4import { motion, useAnimation } from "motion/react";
5import type { HTMLAttributes } from "react";
6import { forwardRef, useCallback, useImperativeHandle, useRef } from "react";
7 
8import { cn } from "@/lib/utils";
9 
10export interface ArrowRightIconHandle {
11  startAnimation: () => void;
12  stopAnimation: () => void;
13}
14 
15interface ArrowRightIconProps extends HTMLAttributes<HTMLDivElement> {
16  size?: number;
17}
18 
19const PATH_VARIANTS: Variants = {
20  normal: { d: "M5 12h14" },
21  animate: {
22    d: ["M5 12h14", "M5 12h9", "M5 12h14"],
23    transition: {
24      duration: 0.4,
25    },
26  },
27};
28 
29const SECONDARY_PATH_VARIANTS: Variants = {
30  normal: { d: "m12 5 7 7-7 7", translateX: 0 },
31  animate: {
32    d: "m12 5 7 7-7 7",
33    translateX: [0, -3, 0],
34    transition: {
35      duration: 0.4,
36    },
37  },
38};
39 
40const ArrowRightIcon = forwardRef<ArrowRightIconHandle, ArrowRightIconProps>(
41  ({ onMouseEnter, onMouseLeave, className, size = 28, ...props }, ref) => {
42    const controls = useAnimation();
43    const isControlledRef = useRef(false);
44 
45    useImperativeHandle(ref, () => {
46      isControlledRef.current = true;
47 
48      return {
49        startAnimation: () => controls.start("animate"),
50        stopAnimation: () => controls.start("normal"),
51      };
52    });
53 
54    const handleMouseEnter = useCallback(
55      (e: React.MouseEvent<HTMLDivElement>) => {
56        if (isControlledRef.current) {
57          onMouseEnter?.(e);
58        } else {
59          controls.start("animate");
60        }
61      },
62      [controls, onMouseEnter]
63    );
64 
65    const handleMouseLeave = useCallback(
66      (e: React.MouseEvent<HTMLDivElement>) => {
67        if (isControlledRef.current) {
68          onMouseLeave?.(e);
69        } else {
70          controls.start("normal");
71        }
72      },
73      [controls, onMouseLeave]
74    );
75 
76    return (
77      <div
78        className={cn(className)}
79        onMouseEnter={handleMouseEnter}
80        onMouseLeave={handleMouseLeave}
81        {...props}
82      >
83        <svg
84          fill="none"
85          height={size}
86          stroke="currentColor"
87          strokeLinecap="round"
88          strokeLinejoin="round"
89          strokeWidth="2"
90          viewBox="0 0 24 24"
91          width={size}
92          xmlns="http://www.w3.org/2000/svg"
93        >
94          <motion.path
95            animate={controls}
96            d="M5 12h14"
97            variants={PATH_VARIANTS}
98          />
99          <motion.path
100            animate={controls}
101// … truncated