open.source/manifold
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

usa map: fix sizing

Browse Source
This commit is contained in:
mantikoros 2022-10-05 17:33:02 -05:00
parent a3b841423f
commit f8660968de
1 changed files with 33 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
web/components/usa-map/usa-map.tsx
View File

@ -1,6 +1,7 @@
// https://github.com/jb-1980/usa-map-react // https://github.com/jb-1980/usa-map-react
// MIT License // MIT License
import clsx from 'clsx'
import { DATA } from './data' import { DATA } from './data'
import { USAState } from './usa-state' import { USAState } from './usa-state'
@ -65,40 +66,38 @@ export const USAMap = ({
const stateClickHandler = (state: string) => customize?.[state]?.clickHandler const stateClickHandler = (state: string) => customize?.[state]?.clickHandler
return ( return (
<div className="flex w-full"> <svg
<svg className={clsx('flex h-96 w-full sm:h-full', className)}
className={className} xmlns="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg" viewBox="0 0 959 593"
viewBox="0 0 959 593" >
> <title>{title}</title>
<title>{title}</title> <g className="outlines">
<g className="outlines"> {States({
{States({ hideStateTitle,
hideStateTitle, fillStateColor,
fillStateColor, stateClickHandler,
stateClickHandler, })}
})} <g className="DC state">
<g className="DC state"> <path
<path className="DC1"
className="DC1" fill={fillStateColor('DC1')}
fill={fillStateColor('DC1')} d="M801.8,253.8 l-1.1-1.6 -1-0.8 1.1-1.6 2.2,1.5z"
d="M801.8,253.8 l-1.1-1.6 -1-0.8 1.1-1.6 2.2,1.5z" />
/> <circle
<circle className="DC2"
className="DC2" onClick={onClick}
onClick={onClick} data-name={'DC'}
data-name={'DC'} fill={fillStateColor('DC2')}
fill={fillStateColor('DC2')} stroke="#FFFFFF"
stroke="#FFFFFF" strokeWidth="1.5"
strokeWidth="1.5" cx="801.3"
cx="801.3" cy="251.8"
cy="251.8" r="5"
r="5" opacity="1"
opacity="1" />
/>
</g>
</g> </g>
</svg> </g>
</div> </svg>
) )
} }