Skip to content

Commit

Permalink
feat: add london cfp banner (#2931)
Browse files Browse the repository at this point in the history 
Co-authored-by: Akshat Nema <[email protected]>%0ACo-authored-by: akshatnema <[email protected]>
  • Loading branch information
@thulieblack @akshatnema
thulieblack and akshatnema authored May 7, 2024
1 parent 43af90f commit 7b6be17
Showing 1 changed file with 56 additions and 70 deletions.
126 changes: 56 additions & 70 deletions components/campaigns/AnnoucementHero.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,14 +20,11 @@ function shouldShowBanner(cfpDeadline) {
}

export default function AnnouncementHero({ className = '', small = false, hideVideo = false }) {
//return null;


const [activeIndex, setActiveIndex] = useState(0);

const cfpDeadlineIndia = '2023-11-30T06:00:00Z'
const cfpDeadlineFrance = '2023-12-06T06:00:00Z'
const showBannerIndia = shouldShowBanner(cfpDeadlineIndia);
const showBannerFrance = shouldShowBanner(cfpDeadlineFrance);
const cfpDeadlineLondon = '2024-07-12T06:00:00Z';
const showBannerLondon = shouldShowBanner(cfpDeadlineLondon);

const Banner = ({ title, dateLocation, cfaText, eventName, cfpDeadline, link, city, activeBanner }) => {
return (
Expand Down Expand Up @@ -65,24 +62,14 @@ export default function AnnouncementHero({ className = '', small = false, hideVi

const banners = [
{
title: "AsyncAPI Conf",
city: "Bengaluru",
dateLocation: "30th of November, 2023 | Bengaluru, India",
cfaText: "Grab Free Tickets",
eventName: "AACoT'23 Bengaluru Edition",
cfpDeadline: cfpDeadlineIndia,
link: "https://conference.asyncapi.com/venue/bangalore",
show: showBannerIndia
},
{
title: "AsyncAPI Conf",
city: "Paris",
dateLocation: "8th of December, 2023 | Paris, France",
cfaText: "Get Free Tickets",
eventName: "AACoT'23 Paris Edition",
cfpDeadline: cfpDeadlineFrance,
link: "https://ticket.apidays.global/event/apidays-paris-2023/8a1f3904-e2be-4c69-a880-37d2ddf1027d/cart?coupon=ASYNCAPICONF23",
show: showBannerFrance
title: "AsyncAPI Conf on Tour'24",
city: "London",
dateLocation: "18 - 19 of September, 2024 | United Kingdom, London",
cfaText: "Apply To Speak",
eventName: "the end of Call for Speakers",
cfpDeadline: cfpDeadlineLondon,
link: "https://conference.asyncapi.com/venue/London",
show: showBannerLondon
}
];

Expand All @@ -109,50 +96,49 @@ export default function AnnouncementHero({ className = '', small = false, hideVi
};
}, [activeIndex]);

return ''
// return (
// <Container as="section" padding='' className={`text-center`}>
// <div className="relative flex flex-row justify-center items-center md:gap-4 overflow-x-hidden">
// <div className="h-8 w-8 rounded-full bg-primary-500 hover:bg-primary-600 cursor-pointer mb-2 absolute left-0 z-10 top-1/2 transform -translate-y-1/2 opacity-50 md:opacity-100 flex justify-center items-center" onClick={goToPrevious}>
// <ArrowLeft className='w-4 text-white' />
// </div>
// <div className='relative w-5/6 pr-3 flex flex-col gap-2 justify-center items-center'>
// <div className='relative w-full h-[18rem] lg:w-[38rem] lg:h-[17rem] overflow-hidden'>
// {banners.map((banner, index) => (
// banner.show && (
// <Banner
// key={index}
// title={banner.title}
// dateLocation={banner.dateLocation}
// cfaText={banner.cfaText}
// eventName={banner.eventName}
// cfpDeadline={banner.cfpDeadline}
// link={banner.link}
// city={banner.city}
// activeBanner={index === activeIndex % len}
// />
// )
// ))}
// </div>
// <div className="flex justify-center m-auto">
// {banners.map((banner, index) => (
// <div
// key={index}
// className={`h-2 w-2 rounded-full mx-1 cursor-pointer ${
// activeIndex % len === index ? 'bg-primary-500' : 'bg-gray-300'
// }`}
// onClick={() => goToIndex(index)}
// />
// ))}
// </div>
// </div>
// <div
// className="h-8 w-8 rounded-full bg-primary-500 hover:bg-primary-600 cursor-pointer mb-2 z-10 absolute right-0 top-1/2 transform -translate-y-1/2 opacity-50 md:opacity-100"
// onClick={goToNext}
// >
// <ArrowRight className='text-white' />
// </div>
// </div>
// </Container>
// );
return (
<Container as="section" padding='' className={`text-center`}>
<div className="relative flex flex-row justify-center items-center md:gap-4 overflow-x-hidden">
{numberOfVisibleBanners > 1 && <div className="h-8 w-8 rounded-full bg-primary-500 hover:bg-primary-600 cursor-pointer mb-2 absolute left-0 z-10 top-1/2 transform -translate-y-1/2 opacity-50 md:opacity-100 flex justify-center items-center" onClick={goToPrevious}>
<ArrowLeft className='w-4 text-white' />
</div>}
<div className='relative w-5/6 pr-3 flex flex-col gap-2 justify-center items-center'>
<div className='relative w-full h-[18rem] lg:w-[38rem] lg:h-[17rem] overflow-hidden'>
{banners.map((banner, index) => (
banner.show && (
<Banner
key={index}
title={banner.title}
dateLocation={banner.dateLocation}
cfaText={banner.cfaText}
eventName={banner.eventName}
cfpDeadline={banner.cfpDeadline}
link={banner.link}
city={banner.city}
activeBanner={index === activeIndex % len}
/>
)
))}
</div>
<div className="flex justify-center m-auto">
{banners.map((banner, index) => (
<div
key={index}
className={`h-2 w-2 rounded-full mx-1 cursor-pointer ${
activeIndex % len === index ? 'bg-primary-500' : 'bg-gray-300'
}`}
onClick={() => goToIndex(index)}
/>
))}
</div>
</div>
{numberOfVisibleBanners > 1 && <div
className="h-8 w-8 rounded-full bg-primary-500 hover:bg-primary-600 cursor-pointer mb-2 z-10 absolute right-0 top-1/2 transform -translate-y-1/2 opacity-50 md:opacity-100"
onClick={goToNext}
>
<ArrowRight className='text-white' />
</div>}
</div>
</Container>
);
}

0 comments on commit 7b6be17

Please sign in to comment.