Refresh Icon

1'use client';
2 
3import { motion, useAnimation } from 'motion/react';
4import { RefreshCcw } from 'lucide-react';
5import { cn } from '@/lib/utils';
6import { useEffect, useState } from 'react';
7 
8interface RefreshIconProps {
9  className?: string;
10  color?: string;
11  size?: number;
12  isRefreshing?: boolean;
13  startOnHover?: boolean;
14  animationType?: 'spin' | 'pulse';
15}
16 
17export function RefreshIcon({
18  className,
19  color = 'currentColor',
20  size = 24,
21  isRefreshing = false,
22  startOnHover = true,
23  animationType = 'spin',
24}: RefreshIconProps) {
25  const controls = useAnimation();
26  const [isHovered, setIsHovered] = useState(false);
27  const shouldAnimate = isRefreshing || (startOnHover && isHovered);
28 
29  useEffect(() => {
30    if (shouldAnimate) {
31      if (animationType === 'spin') {
32        controls.start({
33          rotate: 360,
34          transition: {
35            duration: 1,
36            repeat: Infinity,
37            repeatType: 'loop',
38            ease: 'linear',
39          },
40        });
41      } else if (animationType === 'pulse') {
42        controls.start({
43          scale: [1, 1.1, 1],
44          opacity: [1, 0.7, 1],
45          transition: {
46            duration: 1.5,
47            repeat: Infinity,
48            repeatType: 'loop',
49            ease: 'easeInOut',
50          },
51        });
52      }
53    } else {
54      controls.stop();
55      if (animationType === 'spin') {
56        controls.set({ rotate: 0 });
57      } else {
58        controls.set({ scale: 1, opacity: 1 });
59      }
60    }
61  }, [shouldAnimate, animationType, controls]);
62 
63  return (
64    <div
65      className={cn(
66        'relative flex cursor-pointer items-center justify-center select-none',
67        className
68      )}
69      onMouseEnter={() => setIsHovered(true)}
70      onMouseLeave={() => setIsHovered(false)}
71    >
72      <motion.div animate={controls}>
73        <RefreshCcw size={size} color={color} />
74      </motion.div>
75    </div>
76  );
77}