crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-07-23 04:36:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add plans maps for index page

Browse Source
This commit is contained in:
Daniele Pancottini
2022-12-28 09:43:11 +01:00
parent 23afcd8e0a
commit 8e51ad7cd7
4 changed files with 365 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

87
site/pages/index.tsx
View File

@@ -6,18 +6,19 @@ import { useDisclosure } from '@chakra-ui/react'
import PolygonModal from '@components/common/HomePage/PolygonModal/PolygonModal'
export default function Home() {
const imagePath = 'homepageBackgroundImage.png'
const { locale } = useRouter()
const imagePath = "homepageBackgroundImage.png";
const {locale} = useRouter();
const [mapContainerWidth, setMapContainerWidth] = useState<number | undefined>(600);
const [innerWidth, setInnerWidth] = useState<number | undefined>(600);
const [decadeClicked, setDecadeClicked] = useState<string>("12")
const [mapContainerWidth, setMapContainerWidth] = useState<
number | undefined
>(600)
const [innerWidth, setInnerWidth] = useState<number | undefined>(600)
const [decadeClicked, setDecadeClicked] = useState<string>('12')
const { isOpen, onOpen, onClose } = useDisclosure()
const mapDefinition = {
name: "my-map",
name: 'my-map',
areas: [
{
id: '12',
@@ -25,10 +26,13 @@ export default function Home() {
name: '2000',
fillColor: '#eab54d4d',
strokeColor: 'black',
coords: [4653,1231,5039,1396,5204,1622,5218,2027,5039,2315,4709,2461,4276,2339,4068,2084,4040,1679,4177,1457,4337,1325],
shape: "poly",
//href: `/${locale}/abruzzo/12`,
href: "#",
coords: [
4634, 1239, 4945, 1320, 5162, 1541, 5252, 1857, 5176, 2149, 4941,
2385, 4630, 2474, 4319, 2385, 4092, 2154, 4017, 1833, 4097, 1541,
4323, 1324,
],
shape: 'poly',
href: '#',
},
{
id: '11',
@@ -36,10 +40,12 @@ export default function Home() {
name: '1990',
fillColor: '#eab54d4d',
strokeColor: 'black',
coords: [3904,974,475],
shape: "circle",
//href: `/${locale}/abruzzo/12`,
href: "#",
coords: [
3909, 467, 4175, 549, 4363, 765, 4408, 1046, 4295, 1315, 4045, 1466,
3763, 1470, 3515, 1302, 3402, 1048, 3447, 759, 3626, 551,
],
shape: 'poly',
href: '#',
},
{
id: '10',
@@ -47,37 +53,54 @@ export default function Home() {
name: '1980',
fillColor: '#eab54d4d',
strokeColor: 'black',
coords: [3045,611,387],
shape: "circle",
//href: `/${locale}/abruzzo/12`,
href: "#",
}
]
coords: [
3046, 207, 3280, 289, 3430, 486, 3430, 740, 3287, 952, 3044, 1032,
2799, 947, 2648, 740, 2646, 504, 2808, 279,
],
shape: 'poly',
href: '#',
},
],
}
useEffect(() => {
// Handler to call on window resize
function handleResize() {
setInnerWidth(window.innerWidth);
setInnerWidth(window.innerWidth)
}
window.addEventListener('resize', handleResize);
handleResize();
window.addEventListener('resize', handleResize)
handleResize()
return () => window.removeEventListener('resize', handleResize);
}, []);
return () => window.removeEventListener('resize', handleResize)
}, [])
useEffect(() => {
setMapContainerWidth(document.getElementById('mapContainer')?.clientWidth);
}, [innerWidth]);
setMapContainerWidth(document.getElementById('mapContainer')?.clientWidth)
}, [innerWidth])
return (
<>
<section id='mapContainer' className='w-full'>
<section id="mapContainer" className="w-full">
<div>
<ImageMapper natural stayHighlighted onClick={area => { setDecadeClicked(area.id!); onOpen() }} parentWidth={mapContainerWidth} responsive={true} src={imagePath} map={mapDefinition}></ImageMapper>
<PolygonModal key={decadeClicked} decade={decadeClicked} onModalClose={onClose} isOpen={isOpen} />
<ImageMapper
natural
stayHighlighted
onClick={(area) => {
setDecadeClicked(area.id!)
onOpen()
}}
parentWidth={mapContainerWidth}
responsive={true}
src={imagePath}
map={mapDefinition}
></ImageMapper>
<PolygonModal
key={decadeClicked}
decade={decadeClicked}
onModalClose={onClose}
isOpen={isOpen}
/>
</div>
</section>
</>