fix: stop carousel from scrolling with few events (#397) (#405)

Co-authored-by: Cody's Dad <[email protected]>

components/Header/header.js

@@ -7,8 +7,10 @@ import cities from '../../config/city-lists.json';
 import Venue from '../Venue/venue';
 import Announcement from '../announcement';
 import Link from 'next/link';
+import { useMediaQuery } from 'react-responsive';
 
 function Header() {
+	const isMobile = useMediaQuery({ maxWidth: '590px' });
 	return (
 		<div className='relative'>
 			<div className='container w-full flex items-center justify-center'>
@@ -43,7 +45,7 @@ function Header() {
 				</div>
 			</div>
 			<div className='mt-24'>
-				<ReactSlider>
+			    <ReactSlider>
 					{cities.map((city) => {
 						return <Venue key={city.name} city={city}/>;
 					})}

components/Slider/slider.js

@@ -24,10 +24,15 @@ function ReactSlider({ children }) {
 		variableWidth: isMobile ? false : true,
 		arrows: false,
 	};
+
 	return (
-		<Slider ref={slider} {...settings}>
+		<>
+		{ children.length > 4 || isMobile ? 
+		(<Slider ref={slider} {...settings}>
 			{children}
-		</Slider>
+		</Slider>):(
+	       <div className='flex m-2 justify-center'>{children}</div>)}
+	    </>
 	);
 }
 

components/Venue/venue.js

@@ -7,7 +7,7 @@ function Venue({ className, city }) {
 	return (
 		<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 rounded-md bg-[image:var(--image-url)] flex items-center justify-center p-4 cursor-pointer'>
+				className='relative w-[300px] h-[400px] sm:w-[250px] sm:h-[350px] card-bg rounded-md bg-[image:var(--image-url)] flex items-center justify-center p-4 cursor-pointer m-2'>
 				<div className='flex justify-between flex-col w-full h-full'>
 					<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}

config/city-lists.json

@@ -5,7 +5,7 @@
 		"date": "30th October 2024",
 		"cfpdate":"Not announced yet",
 		"description": "Join us for the AsyncAPI Online Conference Edition as the community unites across the globe to share experiences, collaborate, and foster meaningful connections.",
-		"img": "/img/testMic.png",
+		"img": "/img/testMic.webp",
 		"address": "AsyncAPI Youtube Channel",
 		"map": "https://www.youtube.com/@AsyncAPI",
 		"sponsors": [