Phone Icon

1'use client';
2 
3import { motion, useAnimation } from 'motion/react';
4import { Phone } from 'lucide-react';
5import { cn } from '@/lib/utils';
6import { useEffect, useState } from 'react';
7 
8interface PhoneIconProps {
9  className?: string;
10  color?: string;
11  size?: number;
12  isRinging?: boolean;
13  startOnHover?: boolean;
14}
15 
16export function PhoneIcon({
17  className,
18  color = 'currentColor',
19  size = 24,
20  isRinging = false,
21  startOnHover = true,
22}: PhoneIconProps) {
23  const controls = useAnimation();
24  const [isHovered, setIsHovered] = useState(false);
25  const shouldAnimate = isRinging || (startOnHover && isHovered);
26 
27  useEffect(() => {
28    if (shouldAnimate) {
29      controls.start({
30        rotate: [0, -10, 10, -10, 10, 0],
31        transition: {
32          duration: 0.5,
33          repeat: Infinity,
34          repeatType: 'loop',
35          ease: 'easeInOut',
36          repeatDelay: 1,
37        },
38      });
39    } else {
40      controls.stop();
41      controls.set({ rotate: 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      {shouldAnimate && (
55        <>
56          <motion.div
57            initial={{ opacity: 0, scale: 0.5 }}
58            animate={{ opacity: [0, 0.5, 0], scale: [1, 1.5, 2] }}
59            transition={{
60              duration: 1.5,
61              repeat: Infinity,
62              ease: 'easeOut',
63            }}
64            className='border-primary/50 absolute rounded-full border-2'
65            style={{ width: size * 1.5, height: size * 1.5 }}
66          />
67          <motion.div
68            initial={{ opacity: 0, scale: 0.5 }}
69            animate={{ opacity: [0, 0.5, 0], scale: [1, 1.5, 2] }}
70            transition={{
71              duration: 1.5,
72              repeat: Infinity,
73              ease: 'easeOut',
74              delay: 0.5,
75            }}
76            className='border-primary/30 absolute rounded-full border-2'
77            style={{ width: size * 1.5, height: size * 1.5 }}
78          />
79        </>
80      )}
81      <motion.div animate={controls}>
82        <Phone size={size} color={color} />
83      </motion.div>
84    </div>
85  );
86}