arrow-big-right-dash

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 ArrowBigRightDashIconHandle {
11  startAnimation: () => void;
12  stopAnimation: () => void;
13}
14 
15interface ArrowBigRightDashIconProps extends HTMLAttributes<HTMLDivElement> {
16  size?: number;
17}
18 
19const DASH_VARIANTS: Variants = {
20  normal: { translateX: 0 },
21  animate: {
22    translateX: [0, 1, 0],
23    transition: {
24      duration: 0.4,
25    },
26  },
27};
28 
29const ARROW_VARIANTS: Variants = {
30  normal: { translateX: 0 },
31  animate: {
32    translateX: [0, 3, 0],
33    transition: {
34      duration: 0.4,
35    },
36  },
37};
38 
39const ArrowBigRightDashIcon = forwardRef<
40  ArrowBigRightDashIconHandle,
41  ArrowBigRightDashIconProps
42>(({ onMouseEnter, onMouseLeave, className, size = 28, ...props }, ref) => {
43  const controls = useAnimation();
44  const isControlledRef = useRef(false);
45 
46  useImperativeHandle(ref, () => {
47    isControlledRef.current = true;
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 animate={controls} d="M5 9v6" variants={DASH_VARIANTS} />
95        <motion.path
96          animate={controls}
97          d="M9 9h3V5l7 7-7 7v-4H9V9z"
98          variants={ARROW_VARIANTS}
99        />
100      </svg>
101    </div>
102  );
103});
104 
105ArrowBigRightDashIcon.displayName = "ArrowBigRightDashIcon";
106 
107// … truncated