67 lines
1.9 KiB
TypeScript
67 lines
1.9 KiB
TypeScript
"use client";
|
|
|
|
import React, { useState } from "react";
|
|
import world from "./worldmap.json";
|
|
import { VectorMap } from "@south-paw/react-vector-maps";
|
|
|
|
const EventVMap = ({ height = 350 }: { height?: number }) => {
|
|
const [hovered, setHovered] = useState<string>("None");
|
|
const [focused, setFocused] = useState<string>("None");
|
|
const [clicked, setClicked] = useState<string>("None");
|
|
|
|
const handleMouseEnter = (event: React.MouseEvent<SVGPathElement>) => {
|
|
setHovered(event.currentTarget.getAttribute("name") || "None");
|
|
};
|
|
|
|
const handleMouseLeave = () => {
|
|
setHovered("None");
|
|
};
|
|
|
|
const handleFocus = (event: React.FocusEvent<SVGPathElement>) => {
|
|
setFocused(event.currentTarget.getAttribute("name") || "None");
|
|
};
|
|
|
|
const handleBlur = () => {
|
|
setFocused("None");
|
|
};
|
|
|
|
const handleClick = (event: React.MouseEvent<SVGPathElement>) => {
|
|
setClicked(event.currentTarget.getAttribute("name") || "None");
|
|
};
|
|
|
|
const layerProps = {
|
|
onMouseEnter: handleMouseEnter,
|
|
onMouseLeave: handleMouseLeave,
|
|
onFocus: handleFocus,
|
|
onBlur: handleBlur,
|
|
onClick: handleClick,
|
|
};
|
|
return (
|
|
<div>
|
|
<div className={`w-full h-[${height}px]`}>
|
|
<VectorMap
|
|
{...world}
|
|
layerProps={layerProps}
|
|
className="h-full w-full object-cover dashcode-app-codeVmapInfo"
|
|
/>
|
|
</div>
|
|
<div className="text-center">
|
|
<p className="text-sm font-medium text-card-foreground">
|
|
Hovered:{" "}
|
|
{hovered && <strong className="text-primary">{hovered}</strong>}
|
|
</p>
|
|
<p className="text-sm font-medium text-card-foreground">
|
|
Focused:{" "}
|
|
{focused && <strong className="text-primary">{focused}</strong>}
|
|
</p>
|
|
<p className="text-sm font-medium text-card-foreground">
|
|
Clicked:{" "}
|
|
{clicked && <strong className="text-primary">{clicked}</strong>}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default EventVMap;
|