43 lines
1.1 KiB
TypeScript
43 lines
1.1 KiB
TypeScript
|
import { useState } from "react";
|
||
|
|
import { Text, Group, Rect } from "react-konva";
|
||
|
|
|
||
|
|
type VideoButtonProps = {
|
||
|
|
x?: number;
|
||
|
|
y?: number;
|
||
|
|
onClick?: () => void;
|
||
|
|
text?: string;
|
||
|
|
};
|
||
|
|
|
||
|
|
const VideoButton = ({ x, y, onClick, text }: VideoButtonProps) => {
|
||
|
|
const [isHovered, setIsHovered] = useState(false);
|
||
|
|
return (
|
||
|
|
<Group
|
||
|
|
x={x}
|
||
|
|
y={y}
|
||
|
|
onClick={onClick}
|
||
|
|
onMouseEnter={(e) => {
|
||
|
|
setIsHovered(true);
|
||
|
|
const container = e.target.getStage()?.container();
|
||
|
|
if (container) container.style.cursor = "pointer";
|
||
|
|
}}
|
||
|
|
onMouseLeave={(e) => {
|
||
|
|
setIsHovered(false);
|
||
|
|
const container = e.target.getStage()?.container();
|
||
|
|
if (container) container.style.cursor = "default";
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<Rect
|
||
|
|
width={100}
|
||
|
|
height={35}
|
||
|
|
fill={isHovered ? "#2563eb" : "#3b82f6"}
|
||
|
|
cornerRadius={8}
|
||
|
|
shadowBlur={isHovered ? 10 : 5}
|
||
|
|
shadowOpacity={0.3}
|
||
|
|
/>
|
||
|
|
<Text text={text} fontSize={14} fill="white" width={100} height={35} align="center" verticalAlign="middle" />
|
||
|
|
</Group>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default VideoButton;
|