28 lines
905 B
React
28 lines
905 B
React
|
import React from 'react';
|
||
|
|
import { SvgLoader, SvgProxy } from 'react-svgmt';
|
||
|
|
|
||
|
|
export default function Map({ highlighted }) {
|
||
|
|
return (
|
||
|
|
<div>
|
||
|
|
<SvgLoader
|
||
|
|
path='/belgium-map.svg'
|
||
|
|
style={{
|
||
|
|
width: '500px',
|
||
|
|
height: '500px',
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<SvgProxy selector='.ghent' fill={highlighted.ghent} />
|
||
|
|
<SvgProxy selector='.brussels' fill={highlighted.brussels} />
|
||
|
|
<SvgProxy selector='.antwerp' fill={highlighted.antwerp} />
|
||
|
|
<SvgProxy selector='.tournai' fill={highlighted.tournai} />
|
||
|
|
<SvgProxy selector='.mechelen' fill={highlighted.mechelen} />
|
||
|
|
<SvgProxy selector='.bruges' fill={highlighted.bruges} />
|
||
|
|
<SvgProxy selector='.mons' fill={highlighted.mons} />
|
||
|
|
<SvgProxy selector='.liege' fill={highlighted.liege} />
|
||
|
|
<SvgProxy selector='.namur' fill={highlighted.namur} />
|
||
|
|
<SvgProxy selector='.arlon' fill={highlighted.arlon} />
|
||
|
|
</SvgLoader>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|