axe

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 AxeIconHandle {
11  startAnimation: () => void;
12  stopAnimation: () => void;
13}
14 
15interface AxeIconProps extends HTMLAttributes<HTMLDivElement> {
16  size?: number;
17}
18 
19const AXE_VARIANTS: Variants = {
20  normal: {
21    rotate: 0,
22    transition: {
23      duration: 0.3,
24      ease: "easeOut",
25    },
26  },
27  animate: {
28    rotate: [0, -20, 25, 0],
29    transition: {
30      duration: 0.8,
31      times: [0, 0.6, 0.8, 1],
32      ease: ["easeInOut", "easeOut", "easeOut"],
33    },
34  },
35};
36 
37const AxeIcon = forwardRef<AxeIconHandle, AxeIconProps>(
38  ({ onMouseEnter, onMouseLeave, className, size = 28, ...props }, ref) => {
39    const controls = useAnimation();
40    const isControlledRef = useRef(false);
41 
42    useImperativeHandle(ref, () => {
43      isControlledRef.current = true;
44      return {
45        startAnimation: () => controls.start("animate"),
46        stopAnimation: () => controls.start("normal"),
47      };
48    });
49 
50    const handleMouseEnter = useCallback(
51      (e: React.MouseEvent<HTMLDivElement>) => {
52        if (isControlledRef.current) {
53          onMouseEnter?.(e);
54        } else {
55          controls.start("animate");
56        }
57      },
58      [controls, onMouseEnter]
59    );
60 
61    const handleMouseLeave = useCallback(
62      (e: React.MouseEvent<HTMLDivElement>) => {
63        if (isControlledRef.current) {
64          onMouseLeave?.(e);
65        } else {
66          controls.start("normal");
67        }
68      },
69      [controls, onMouseLeave]
70    );
71 
72    return (
73      <div
74        className={cn(className)}
75        onMouseEnter={handleMouseEnter}
76        onMouseLeave={handleMouseLeave}
77        {...props}
78      >
79        <motion.svg
80          animate={controls}
81          fill="none"
82          height={size}
83          initial="normal"
84          stroke="currentColor"
85          strokeLinecap="round"
86          strokeLinejoin="round"
87          strokeWidth="2"
88          style={{ transformOrigin: "0% 100%", transformBox: "fill-box" }}
89          variants={AXE_VARIANTS}
90          viewBox="0 0 24 24"
91          width={size}
92          xmlns="http://www.w3.org/2000/svg"
93        >
94          <path d="m14 12-8.381 8.38a1 1 0 0 1-3.001-3L11 9" />
95// … truncated