// "use client"; // import { memo } from "react"; // import { useTagEffects } from "./useTagEffects"; // const Tag = () => { // const { shouldShow, handleMouseEnter, handleClick, buttonClassName } = useTagEffects(); // const handleTagClick = () => { // window.open('https://webild.io', '_blank'); // }; // if (!shouldShow) { // return null; // } // return ( // // ); // }; // Tag.displayName = "Tag"; // export default memo(Tag); "use client"; import { memo } from "react"; import { useRive, useStateMachineInput, Layout, Fit } from "@rive-app/react-canvas"; import { useTagEffects } from "./useTagEffects"; const STATE_MACHINE_NAME = "State Machine 1"; const HOVER_INPUT_NAME = "Hover"; const Tag = () => { const { shouldShow, handleMouseEnter, handleClick } = useTagEffects(); const { rive, RiveComponent } = useRive({ src: "/watermark-bob2.riv", stateMachines: STATE_MACHINE_NAME, autoplay: true, layout: new Layout({ fit: Fit.Contain, }), }); const hoverInput = useStateMachineInput(rive, STATE_MACHINE_NAME, HOVER_INPUT_NAME); const handleTagClick = () => { window.open('https://webild.io', '_blank'); }; const onMouseEnter = () => { handleMouseEnter(); if (hoverInput) { hoverInput.value = true; } }; const onMouseLeave = () => { if (hoverInput) { hoverInput.value = false; } }; if (!shouldShow) { return null; } return ( ); }; Tag.displayName = "Tag"; export default memo(Tag);