37 lines
723 B
TypeScript
37 lines
723 B
TypeScript
|
import { ClickHandler } from './usa-map'
|
||
|
|
|
||
|
|
type USAStateProps = {
|
||
|
|
state: string
|
||
|
|
dimensions: string
|
||
|
|
fill: string
|
||
|
|
onClickState: ClickHandler
|
||
|
|
stateName: string
|
||
|
|
hideStateTitle?: boolean
|
||
|
|
}
|
||
|
|
export const USAState = ({
|
||
|
|
state,
|
||
|
|
dimensions,
|
||
|
|
fill,
|
||
|
|
onClickState,
|
||
|
|
stateName,
|
||
|
|
hideStateTitle,
|
||
|
|
}: USAStateProps) => {
|
||
|
|
return (
|
||
|
|
<path
|
||
|
|
d={dimensions}
|
||
|
|
fill={fill}
|
||
|
|
data-name={state}
|
||
|
|
className={`${state} state hover:cursor-pointer hover:contrast-125`}
|
||
|
|
onClick={onClickState}
|
||
|
|
id={state}
|
||
|
|
>
|
||
|
|
<text>
|
||
|
|
<textPath xlinkHref={`#${state}`}>
|
||
|
|
{stateName}
|
||
|
|
</textPath>
|
||
|
|
</text>
|
||
|
|
{hideStateTitle ? null : <title>{stateName}</title>}
|
||
|
|
</path>
|
||
|
|
)
|
||
|
|
}
|