Animiertes Hover-Logo mit Typescript, Tailwind und Framer Motion

import { useState, useCallback } from „react“;
import { motion, AnimatePresence, useMotionValue } from „framer-motion“;
import { Play } from „lucide-react“;

Standardfunktion LogoHover() exportieren {
  const [isHovered, setIsHovered] = useState(false);
  const [showVideo, setShowVideo] = useState(false);
  const x = useMotionValue(0);

  const handleMouseMove = useCallback(
    (Ereignis: React.MouseEvent<HTMLElement>) => {
      const halfWidth = event.currentTarget.offsetWidth / 2;
      x.set(event.nativeEvent.offsetX - halfWidth);
    },
    [X]
  );

  zurückkehren (
    <div className="relative w-[100px] h-[80px] Cursorzeiger" onMouseEnter={() => setIsHovered(true)} onMouseLeave={() => setIsHovered(false)}>
      <AnimatePresence>
        {!isHovered && (
          // Ändern Sie mit Ihrem eigenen Logo
          <motion.img src="/theo-logo.png" alt="Wegic Logo" className="absolute inset-0 w-full h-full object-contain" initial={{ opacity: 1, scale: 1 } } exit={{ Deckkraft: 0, Skalierung: 0,8 }} transit={{ Dauer: 0,2 }} />
        )}
      </AnimatePresence>

      <AnimatePresence>
        {isHovered && (
          <motion.div className="absolute inset-0 flex items-center justify-center w-full" initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0, skalieren : 0,8 }} Transition={{ Dauer: 0,2 }}>
            <-Taste
              className="flex w-full items-center justify-center gap-2 bg-white border border-black h-10 py-2 abgerundet-md"
              onMouseMove={handleMouseMove}
              onMouseEnter={() => setShowVideo(true)}
              onMouseLeave={() => setShowVideo(false)}
            >
              <Play size={16} fill="white" StrokeWidth={2} aria-hidden="true" />
              <p className="text-[10px] flex font-semibold">Video ansehen</p>
            </button>
          </motion.div>
        )}
      </AnimatePresence>
      {/* Video-Tooltip */}
      <AnimatePresence mode="popLayout">
        {showVideo && (
          <motion.div
            initial={{ Deckkraft: 0, y: 20, Maßstab: 0,6 }}
            animieren={{
              Deckkraft: 1,
              y: 0,
              Maßstab: 1,
              Übergang: {
                Steifigkeit: 260,
                Dämpfung: 10,
                Dauer: 0,3,
              },
              Breite: „200px“,
              Höhe: „auto“,
            }}
            exit={{ Deckkraft: 0, y: 20, Maßstab: 0,6 }}
           >