book-open.tsx133 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 BookOpenIconHandle {
10	startAnimation: () => void;
11	stopAnimation: () => void;
12	}
13
14	interface BookOpenIconProps extends HTMLAttributes<HTMLDivElement> {
15	size?: number;
16	}
17
18	const BookOpenIcon = forwardRef<BookOpenIconHandle, BookOpenIconProps>(
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	<motion.path
72	animate={controls}
73	d="M12 7v14"
74	transition={{ duration: 0.35, ease: 'easeOut' }}
75	variants={{
76	normal: { pathLength: 1, opacity: 1 },
77	animate: { pathLength: [0, 1], opacity: [0.4, 1] },
78	}}
79	/>
80	<motion.path
81	animate={controls}
82	d="M16 12h2"
83	transition={{ duration: 0.3, delay: 0.1, ease: 'easeOut' }}
84	variants={{
85	normal: { pathLength: 1, opacity: 1 },
86	animate: { pathLength: [0, 1], opacity: [0, 1] },
87	}}
88	/>
89	<motion.path
90	animate={controls}
91	d="M16 8h2"
92	transition={{ duration: 0.3, delay: 0.05, ease: 'easeOut' }}
93	variants={{
94	normal: { pathLength: 1, opacity: 1 },
95	animate: { pathLength: [0, 1], opacity: [0, 1] },
96	}}
97	/>
98	<motion.path
99	animate={controls}
100	d="M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z"
101	transition={{ duration: 0.4, ease: 'easeOut' }}
102	variants={{
103	normal: { pathLength: 1 },
104	animate: { pathLength: [0, 1] },
105	}}
106	/>
107	<motion.path
108	animate={controls}
109	d="M6 8h2"
110	transition={{ duration: 0.3, delay: 0.05, ease: 'easeOut' }}
111	variants={{
112	normal: { pathLength: 1, opacity: 1 },
113	animate: { pathLength: [0, 1], opacity: [0, 1] },
114	}}
115	/>
116	<motion.path
117	animate={controls}
118	d="M6 12h2"
119	transition={{ duration: 0.3, delay: 0.1, ease: 'easeOut' }}
120	variants={{
121	normal: { pathLength: 1, opacity: 1 },
122	animate: { pathLength: [0, 1], opacity: [0, 1] },
123	}}
124	/>
125	</svg>
126	</div>
127	);
128	},
129	);
130
131	BookOpenIcon.displayName = 'BookOpenIcon';
132
133	export { BookOpenIcon };