arrow-up-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 ArrowUpRightIconHandle {
11  startAnimation: () => void;
12  stopAnimation: () => void;
13}
14 
15interface ArrowUpRightIconProps extends HTMLAttributes<HTMLDivElement> {
16  size?: number;
17}
18 
19const ARROW_VARIANTS: Variants = {
20  normal: {
21    scale: 1,
22    translateX: 0,
23    translateY: 0,
24  },
25  animate: {
26    scale: [1, 0.85, 1],
27    translateX: [0, -4, 0],
28    translateY: [0, 4, 0],
29    originX: 1,
30    originY: 0,
31    transition: {
32      duration: 0.5,
33      ease: "easeInOut",
34    },
35  },
36};
37 
38const ArrowUpRightIcon = forwardRef<
39  ArrowUpRightIconHandle,
40  ArrowUpRightIconProps
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    return {
48      startAnimation: () => controls.start("animate"),
49      stopAnimation: () => controls.start("normal"),
50    };
51  });
52 
53  const handleMouseEnter = useCallback(
54    (e: React.MouseEvent<HTMLDivElement>) => {
55      if (!isControlledRef.current) controls.start("animate");
56      onMouseEnter?.(e);
57    },
58    [controls, onMouseEnter]
59  );
60 
61  const handleMouseLeave = useCallback(
62    (e: React.MouseEvent<HTMLDivElement>) => {
63      if (!isControlledRef.current) controls.start("normal");
64      onMouseLeave?.(e);
65    },
66    [controls, onMouseLeave]
67  );
68 
69  return (
70    <div
71      className={cn(className)}
72      onMouseEnter={handleMouseEnter}
73      onMouseLeave={handleMouseLeave}
74      {...props}
75    >
76      <svg
77        fill="none"
78        height={size}
79        stroke="currentColor"
80        strokeLinecap="round"
81        strokeLinejoin="round"
82        strokeWidth="2"
83        viewBox="0 0 24 24"
84        width={size}
85        xmlns="http://www.w3.org/2000/svg"
86      >
87        <motion.g animate={controls} variants={ARROW_VARIANTS}>
88          <path d="M7 7H17" />
89          <path d="M17 7V17" />
90          <path d="M7 17L17 7" />
91        </motion.g>
92      </svg>
93    </div>
94  );
95});
96 
97ArrowUpRightIcon.displayName = "ArrowUpRightIcon";
98 
99export { ArrowUpRightIcon };