log-out.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 LogOutIconHandle {
10	startAnimation: () => void;
11	stopAnimation: () => void;
12	}
13
14	interface LogOutIconProps extends HTMLAttributes<HTMLDivElement> {
15	size?: number;
16	}
17
18	const LogOutIcon = forwardRef<LogOutIconHandle, LogOutIconProps>(
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	<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	>
71	<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" />
72	<motion.g
73	animate={controls}
74	transition={{ type: 'spring', stiffness: 250, damping: 18 }}
75	variants={{
76	normal: { translateX: 0 },
77	animate: { translateX: 3 },
78	}}
79	>
80	<polyline points="16 17 21 12 16 7" />
81	<line x1="21" y1="12" x2="9" y2="12" />
82	</motion.g>
83	</svg>
84	</div>
85	);
86	},
87	);
88
89	LogOutIcon.displayName = 'LogOutIcon';
90
91	export { LogOutIcon };