راهنمای ابزار ویدیوی متحرک با استفاده از تایپ اسکریپت و حرکت فریم

import { useState, useCallback, useMemo } from "react";
import { motion, useTransform, AnimatePresence, useMotionValue, useSpring } from "framer-motion";
import { cn } from "@/lib/utils";

interface TooltipItem {
  id: number;
  name: string;
  designation: string;
  image: string;
  video: string;
  text: string;
}

interface VideoTooltipProps {
  items: TooltipItem[];
  className?: string;
}

export const VideoTooltip = ({ items, className = "" }: VideoTooltipProps) => {
  const [hoveredIndex, setHoveredIndex] = useState(null);
  const [showText, setShowText] = useState(false);
  const springConfig = useMemo(
    () => ({
      stiffness: 100,
      damping: 5,
    }),
    []
  );

  // Motion setup
  const x = useMotionValue(0);
  const translateX = useSpring(useTransform(x, [-100, 100], [-50, 50]), springConfig);
  // Optimize event handler with useCallback
  const handleMouseMove = useCallback(
    (event: React.MouseEvent) => {
      const halfWidth = event.currentTarget.offsetWidth / 2;
      x.set(event.nativeEvent.offsetX - halfWidth);
    },
    [x]
  );

  return (
    

      {items.map((item) => (
        
 setHoveredIndex(item.id)} onMouseLeave={() => setHoveredIndex(null)}>
          
            {hoveredIndex === item.id && (
              
                
                  
                
                  
{item.text}
                
                

                  

                     setShowText(false)}>
                      Video
                    
                     setShowText(true)}>
                      Text
                    
                  
                
              
            )}
          
          
        
      ))}
    
  );
};