life-buoy.tsx91 lines · main

1	'use client';
2
3	import { motion, useAnimation } from 'motion/react';
4	import type { HTMLAttributes } from 'react';
5	import { forwardRef, useCallback, useImperativeHandle, useRef } from 'react';
6
7	import { cn } from '@/lib/utils';
8
9	export interface LifeBuoyIconHandle {
10	startAnimation: () => void;
11	stopAnimation: () => void;
12	}
13
14	interface LifeBuoyIconProps extends HTMLAttributes<HTMLDivElement> {
15	size?: number;
16	}
17
18	const LifeBuoyIcon = forwardRef<LifeBuoyIconHandle, LifeBuoyIconProps>(
19	({ onMouseEnter, onMouseLeave, className, size = 18, ...props }, ref) => {
20	const controls = useAnimation();
21	const isControlledRef = useRef(false);
22
23	useImperativeHandle(ref, () => {
24	isControlledRef.current = true;
25	return {
26	startAnimation: () => controls.start('animate'),
27	stopAnimation: () => controls.start('normal'),
28	};
29	});
30
31	const handleMouseEnter = useCallback(
32	(e: React.MouseEvent<HTMLDivElement>) => {
33	if (isControlledRef.current) {
34	onMouseEnter?.(e);
35	} else {
36	controls.start('animate');
37	}
38	},
39	[controls, onMouseEnter],
40	);
41
42	const handleMouseLeave = useCallback(
43	(e: React.MouseEvent<HTMLDivElement>) => {
44	if (isControlledRef.current) {
45	onMouseLeave?.(e);
46	} else {
47	controls.start('normal');
48	}
49	},
50	[controls, onMouseLeave],
51	);
52
53	return (
54	<div
55	className={cn(className)}
56	onMouseEnter={handleMouseEnter}
57	onMouseLeave={handleMouseLeave}
58	{...props}
59	>
60	<motion.svg
61	animate={controls}
62	fill="none"
63	height={size}
64	stroke="currentColor"
65	strokeLinecap="round"
66	strokeLinejoin="round"
67	strokeWidth="2"
68	viewBox="0 0 24 24"
69	width={size}
70	xmlns="http://www.w3.org/2000/svg"
71	transition={{ duration: 0.5, ease: 'easeInOut' }}
72	variants={{
73	normal: { rotate: 0 },
74	animate: { rotate: [0, 20, -20, 0] },
75	}}
76	>
77	<circle cx="12" cy="12" r="10" />
78	<path d="m4.93 4.93 4.24 4.24" />
79	<path d="m14.83 9.17 4.24-4.24" />
80	<path d="m14.83 14.83 4.24 4.24" />
81	<path d="m9.17 14.83-4.24 4.24" />
82	<circle cx="12" cy="12" r="4" />
83	</motion.svg>
84	</div>
85	);
86	},
87	);
88
89	LifeBuoyIcon.displayName = 'LifeBuoyIcon';
90
91	export { LifeBuoyIcon };