Logo de survol animé utilisant Typescript, Tailwind et Framer Motion

importer { useState, useCallback } depuis "react" ;
importer { motion, AnimatePresence, useMotionValue } depuis "framer-motion" ;
importer { Play } depuis "lucide-react" ;

exporter la fonction par défaut LogoHover() {
  const [isHovered, setIsHovered] = useState(false);
  const [showVideo, setShowVideo] = useState(false);
  const x = useMotionValue(0);

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

  retour (
    <div className="relative w-[100px] h-[80px] curseur-pointeur" onMouseEnter={() => setIsHovered(true)} onMouseLeave={() => setIsHovered(false)}>
      <AnimatePresence>
        {!isHovered && (
          //changez avec votre propre logo
          <motion.img src="/theo-logo.png" alt="Logo Wegic" className="absolute inset-0 w-full h-full object-contain" initial={{ opacité : 1, échelle : 1 } } exit={{ opacité : 0, échelle : 0,8 }} transition={{ durée : 0,2 }} />
        )}
      </AnimatePresence>

      <AnimatePresence>
        {isHovered && (
          <motion.div className="absolute inset-0 flex items-center justification-center w-full" initial={{ opacité : 0 }} animate={{ opacité : 1 }} exit={{ opacité : 0, échelle : 0,8 }} transition={{ durée : 0,2 }}>
            <bouton
              className="flex w-full items-center justification-center gap-2 bg-white border border-black h-10 py-2 arrondi-md"
              onMouseMove={handleMouseMove}
              onMouseEnter={() => setShowVideo (vrai)}
              onMouseLeave={() => setShowVideo(faux)}
            >
              <Taille de lecture={16} fill="white" StrokeWidth={2} aria-hidden="true" />
              <p className="text-[10px] flex font-semibold">regarder la vidéo</p>
            </bouton>
          </motion.div>
        )}
      </AnimatePresence>
      {/* Info-bulle vidéo */}
      <AnimatePresence mode="popLayout">
        {showVideo && (
          <motion.div
            initial={{ opacité : 0, y : 20, échelle : 0,6 }}
            animer={{
              opacité : 1,
              oui : 0,
              échelle: 1,
              transition: {
                rigidité : 260,
                amortissement : 10,
                durée : 0,3,
              },
              largeur : "200px",
              hauteur : "auto",
            }}
            exit={{ opacité : 0, y : 20, échelle : 0,6 }}
           >