globe.tsx88 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 GlobeIconHandle {
10	startAnimation: () => void;
11	stopAnimation: () => void;
12	}
13
14	interface GlobeIconProps extends HTMLAttributes<HTMLDivElement> {
15	size?: number;
16	}
17
18	const GlobeIcon = forwardRef<GlobeIconHandle, GlobeIconProps>(
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	fill="none"
62	height={size}
63	stroke="currentColor"
64	strokeLinecap="round"
65	strokeLinejoin="round"
66	strokeWidth="2"
67	viewBox="0 0 24 24"
68	width={size}
69	xmlns="http://www.w3.org/2000/svg"
70	animate={controls}
71	variants={{
72	normal: { rotate: 0 },
73	animate: { rotate: 360 },
74	}}
75	transition={{ type: 'spring', stiffness: 80, damping: 15 }}
76	>
77	<circle cx="12" cy="12" r="10" />
78	<path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20" />
79	<path d="M2 12h20" />
80	</motion.svg>
81	</div>
82	);
83	},
84	);
85
86	GlobeIcon.displayName = 'GlobeIcon';
87
88	export { GlobeIcon };