Function LoadingTips

components/loading-tips.tsx:40–128

()

];

export function LoadingTips() {
  const [currentTipIndex, setCurrentTipIndex] = useState(0);
  const [isVisible, setIsVisible] = useState(true);
  const [shuffledTips, setShuffledTips] = useState(TIPS);
  const [isPaused, setIsPaused] = useState(false);

  // Shuffle tips on mount
  useEffect(() => {
    const shuffled = [...TIPS].sort(() => Math.random() - 0.5);
    setShuffledTips(shuffled);
  }, []);

  // Rotate tips
  useEffect(() => {
    if (isPaused) return;

    const interval = setInterval(() => {
      setIsVisible(false);
      
      setTimeout(() => {
        setCurrentTipIndex((prev) => (prev + 1) % shuffledTips.length);
        setIsVisible(true);
      }, 300);
    }, 4000);

    return () => clearInterval(interval);
  }, [shuffledTips.length, isPaused]);

  const handleDotClick = (index: number) => {
    if (index === currentTipIndex) return;
    
    setIsVisible(false);
    
    setTimeout(() => {
      setCurrentTipIndex(index);
      setIsVisible(true);
    }, 300);
  };

  const currentTip = shuffledTips[currentTipIndex];
  const Icon = currentTip.icon;

  return (
    <Card 
      className="p-6 max-w-2xl mx-auto mt-6 relative"
      onMouseEnter={() => setIsPaused(true)}
      onMouseLeave={() => setIsPaused(false)}
    >
      <div
        className={`transition-all duration-300 ${
          isVisible ? "opacity-100 transform translate-y-0" : "opacity-0 transform -translate-y-2"
        }`}
      >
        <div className="flex items-start gap-4">
          <div className="flex-shrink-0">
            <div className="w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center">
              <Icon className="w-5 h-5 text-primary" />
            </div>