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