fix: added venue link navigation (#275)

* Added venue link navigation * Fixes map opening on clicking venue tab * Added noopener * Improve code in venue.js * Update venue.js --------- Co-authored-by: Ace <[email protected]> Co-authored-by: V Thulisile Sibanda <[email protected]>
asyncapi · Apr 8, 2024 · cd64d7e · cd64d7e
1 parent 8b3b75b
commit cd64d7e
Showing 1 changed file with 15 additions and 11 deletions.
diff --git a/components/Venue/venue.js b/components/Venue/venue.js
@@ -1,30 +1,34 @@
 /* eslint-disable react/no-unescaped-entities */
 import React from 'react';
+import Link from 'next/link';
 
 function Venue({ className, city }) {
 	return (
-		<div>
-			<div style={{'--image-url': `url(${city.img})`}} 
-			className='relative w-[300px] h-[400px] sm:w-[250px] sm:h-[350px] card-bg bg-[image:var(--image-url)] flex items-center justify-center p-4 cursor-pointer'>
+		<Link href={`/venue/${city.name}`}>
+			<div style={{'--image-url': `url(${city.img})`}}
+				className='relative w-[300px] h-[400px] sm:w-[250px] sm:h-[350px] card-bg bg-[image:var(--image-url)] flex items-center justify-center p-4 cursor-pointer'>
 				<div className='flex justify-between flex-col w-full h-full'>
-					<div className='flex justify-between items-center'>
-						<div><div className={`border text-white text-md rounded-lg p-1 text-center mt-2 ${city.cfp ? 'block': 'hidden' }`}>cfp is open</div></div>
-						<a href={city.map} target='_blank' className='w-8 h-8 bg-white rounded-xl flex items-center justify-center' rel="noreferrer">
-						<img src='/img/mapIcon.svg' className='w-6' />
-						</a>
+					<div className='flex items-center'>
+						{city.cfp? <div className='border text-white text-md rounded-lg p-1 text-center mt-2'>cfp is open</div> :null}
+						<button onClick={(e) => {
+							e.preventDefault()
+							window.open(city.map, '_blank', 'noopener')
+						}} className='w-8 h-8 bg-white rounded-xl flex items-center justify-center ml-auto'>
+							<img src='/img/mapIcon.svg' className='w-6' />
+						</button>
 					</div>
 					<div></div>
 					<div className='text-white'>
 						<div>
 							<span className='text-lg font-bold'>{city.country}, {city.name}</span>
 						</div>
 						<div className='flex items-center justify-between w-full'>
-						<div className='border border-gray-400 rounded-lg p-1 text-center mt-2'>{city.date}</div>
+							<div className='border border-gray-400 rounded-lg p-1 text-center mt-2'>{city.date}</div>
 						</div>
 					</div>
-					</div>
 				</div>
-		</div>
+			</div>
+		</Link>
 	);
 }