57 lines
1.4 KiB
TypeScript
57 lines
1.4 KiB
TypeScript
"use client";
|
|
|
|
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: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/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 (
|
|
<button
|
|
className="fixed z-[99999] bottom-6 right-6 w-[160px] h-[92px] cursor-pointer"
|
|
onClick={(e) => handleClick(e, handleTagClick)}
|
|
onMouseEnter={onMouseEnter}
|
|
onMouseLeave={onMouseLeave}
|
|
>
|
|
<RiveComponent className="w-full h-full" />
|
|
</button>
|
|
);
|
|
};
|
|
|
|
export default Tag;
|