badge-percent

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