'use client';
import type { Variants } from 'motion/react';
import type { HTMLAttributes } from 'react';
import { forwardRef, useCallback, useImperativeHandle, useRef } from 'react';
import { motion, useAnimation } from 'motion/react';
import { cn } from '@/lib/utils';
export interface UsersIconHandle {
startAnimation: () => void;
stopAnimation: () => void;
}
interface UsersIconProps extends HTMLAttributes {
size?: number;
}
const PATH_VARIANTS: Variants = {
normal: {
translateX: 0,
transition: {
type: 'spring',
stiffness: 200,
damping: 13,
},
},
animate: {
translateX: [-6, 0],
transition: {
delay: 0.1,
type: 'spring',
stiffness: 200,
damping: 13,
},
},
};
const UsersIcon = forwardRef
(
({ onMouseEnter, onMouseLeave, className, size = 28, ...props }, ref) => {
const controls = useAnimation();
const isControlledRef = useRef(false);
useImperativeHandle(ref, () => {
isControlledRef.current = true;
return {
startAnimation: () => controls.start('animate'),
stopAnimation: () => controls.start('normal'),
};
});
const handleMouseEnter = useCallback(
(e: React.MouseEvent) => {
if (!isControlledRef.current) {
controls.start('animate');
} else {
onMouseEnter?.(e);
}
},
[controls, onMouseEnter]
);
const handleMouseLeave = useCallback(
(e: React.MouseEvent) => {
if (!isControlledRef.current) {
controls.start('normal');
} else {
onMouseLeave?.(e);
}
},
[controls, onMouseLeave]
);
return (
);
}
);
UsersIcon.displayName = 'UsersIcon';
export { UsersIcon };
