badge-alert

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 BadgeAlertIconHandle {
11  startAnimation: () => void;
12  stopAnimation: () => void;
13}
14 
15interface BadgeAlertIconProps extends HTMLAttributes<HTMLDivElement> {
16  size?: number;
17}
18 
19const ICON_VARIANTS: Variants = {
20  normal: { scale: 1, rotate: 0 },
21  animate: {
22    scale: [1, 1.1, 1.1, 1.1, 1],
23    rotate: [0, -3, 3, -2, 2, 0],
24    transition: {
25      duration: 0.5,
26      times: [0, 0.2, 0.4, 0.6, 1],
27      ease: "easeInOut",
28    },
29  },
30};
31const BadgeAlertIcon = forwardRef<BadgeAlertIconHandle, BadgeAlertIconProps>(
32  ({ onMouseEnter, onMouseLeave, className, size = 28, ...props }, ref) => {
33    const controls = useAnimation();
34    const isControlledRef = useRef(false);
35 
36    useImperativeHandle(ref, () => {
37      isControlledRef.current = true;
38 
39      return {
40        startAnimation: () => controls.start("animate"),
41        stopAnimation: () => controls.start("normal"),
42      };
43    });
44 
45    const handleMouseEnter = useCallback(
46      (e: React.MouseEvent<HTMLDivElement>) => {
47        if (isControlledRef.current) {
48          onMouseEnter?.(e);
49        } else {
50          controls.start("animate");
51        }
52      },
53      [controls, onMouseEnter]
54    );
55 
56    const handleMouseLeave = useCallback(
57      (e: React.MouseEvent<HTMLDivElement>) => {
58        if (isControlledRef.current) {
59          onMouseLeave?.(e);
60        } else {
61          controls.start("normal");
62        }
63      },
64      [controls, onMouseLeave]
65    );
66 
67    return (
68      <div
69        className={cn(className)}
70        onMouseEnter={handleMouseEnter}
71        onMouseLeave={handleMouseLeave}
72        {...props}
73      >
74        <motion.svg
75          animate={controls}
76          fill="none"
77          height={size}
78          stroke="currentColor"
79          strokeLinecap="round"
80          strokeLinejoin="round"
81          strokeWidth="2"
82          variants={ICON_VARIANTS}
83          viewBox="0 0 24 24"
84          width={size}
85          xmlns="http://www.w3.org/2000/svg"
86        >
87          <path d="M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z" />
88          <line x1="12" x2="12" y1="8" y2="12" />
89// … truncated