arrow-up-left

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 ArrowUpLeftIconHandle {
11  startAnimation: () => void;
12  stopAnimation: () => void;
13}
14 
15interface ArrowUpLeftIconProps 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: 0,
30    originY: 0,
31    transition: {
32      duration: 0.5,
33      ease: "easeInOut",
34    },
35  },
36};
37 
38const ArrowUpLeftIcon = forwardRef<ArrowUpLeftIconHandle, ArrowUpLeftIconProps>(
39  ({ onMouseEnter, onMouseLeave, className, size = 28, ...props }, ref) => {
40    const controls = useAnimation();
41    const isControlledRef = useRef(false);
42 
43    useImperativeHandle(ref, () => {
44      isControlledRef.current = true;
45      return {
46        startAnimation: () => controls.start("animate"),
47        stopAnimation: () => controls.start("normal"),
48      };
49    });
50 
51    const handleMouseEnter = useCallback(
52      (e: React.MouseEvent<HTMLDivElement>) => {
53        if (!isControlledRef.current) controls.start("animate");
54        onMouseEnter?.(e);
55      },
56      [controls, onMouseEnter]
57    );
58 
59    const handleMouseLeave = useCallback(
60      (e: React.MouseEvent<HTMLDivElement>) => {
61        if (!isControlledRef.current) controls.start("normal");
62        onMouseLeave?.(e);
63      },
64      [controls, onMouseLeave]
65    );
66 
67    return (
68      <div
69        className={cn(className)}
70        onMouseEnter={handleMouseEnter}
71        onMouseLeave={handleMouseLeave}
72        {...props}
73      >
74        <svg
75          fill="none"
76          height={size}
77          stroke="currentColor"
78          strokeLinecap="round"
79          strokeLinejoin="round"
80          strokeWidth="2"
81          viewBox="0 0 24 24"
82          width={size}
83          xmlns="http://www.w3.org/2000/svg"
84        >
85          <motion.g animate={controls} variants={ARROW_VARIANTS}>
86            <path d="M7 7H17" />
87            <path d="M7 7V17" />
88            <path d="M17 17L7 7" />
89          </motion.g>
90        </svg>
91      </div>
92    );
93  }
94);
95 
96ArrowUpLeftIcon.displayName = "ArrowUpLeftIcon";
97 
98export { ArrowUpLeftIcon };