Rocket Icon

1'use client';
2 
3import { motion, useAnimation } from 'motion/react';
4import { Rocket } from 'lucide-react';
5import { cn } from '@/lib/utils';
6import { useEffect, useState } from 'react';
7 
8interface RocketIconProps {
9  className?: string;
10  color?: string;
11  size?: number;
12  isLaunching?: boolean;
13  startOnHover?: boolean;
14}
15 
16export function RocketIcon({
17  className,
18  color = 'currentColor',
19  size = 24,
20  isLaunching = false,
21  startOnHover = true,
22}: RocketIconProps) {
23  const controls = useAnimation();
24  const [isHovered, setIsHovered] = useState(false);
25  const shouldAnimate = isLaunching || (startOnHover && isHovered);
26 
27  useEffect(() => {
28    if (shouldAnimate) {
29      controls.start({
30        x: [0, -2, 2, -2, 2, 0],
31        y: [0, -2, 2, -2, 2, 0],
32        transition: {
33          duration: 0.2,
34          repeat: Infinity,
35          repeatType: 'loop',
36          ease: 'linear',
37        },
38      });
39    } else {
40      controls.stop();
41      controls.set({ x: 0, y: 0 });
42    }
43  }, [shouldAnimate, controls]);
44 
45  return (
46    <div
47      className={cn(
48        'relative flex cursor-pointer items-center justify-center select-none',
49        className
50      )}
51      onMouseEnter={() => setIsHovered(true)}
52      onMouseLeave={() => setIsHovered(false)}
53    >
54      <motion.div animate={controls}>
55        <Rocket size={size} color={color} />
56      </motion.div>
57      {shouldAnimate && (
58        <motion.div
59          initial={{ opacity: 0, y: 10, scale: 0.5 }}
60          animate={{ opacity: [0, 1, 0], y: [10, 20], scale: [0.5, 1] }}
61          transition={{
62            duration: 0.5,
63            repeat: Infinity,
64            ease: 'easeOut',
65          }}
66          className='absolute -bottom-2 h-4 w-2 rounded-full bg-orange-500 blur-sm'
67        />
68      )}
69    </div>
70  );
71}