Skip to content

Commit

Permalink
updated AnnouncementHero.tsx
Browse files Browse the repository at this point in the history
  • Loading branch information
IITI-tushar committed Dec 28, 2024
1 parent 4e877a5 commit 63b154c
Showing 1 changed file with 31 additions and 23 deletions.
54 changes: 31 additions & 23 deletions components/campaigns/AnnouncementHero.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -49,41 +49,49 @@ export default function AnnouncementHero({ className = '', small = false }: IAnn
}

return (
<Container as='section' padding='' className='text-center'>
<div className='relative flex flex-row items-center justify-center overflow-x-hidden md:gap-4'>
<Container as="section" padding="" className="text-center">
<div className="relative flex flex-row items-center justify-center overflow-x-hidden md:gap-4">
{numberOfVisibleBanners > 1 && (
<div
className={`absolute left-0 top-1/2 z-10 mb-2 flex size-8 -translate-y-1/2 cursor-pointer
items-center justify-center rounded-full bg-primary-500 opacity-50 hover:bg-primary-600 md:opacity-100`}
onClick={goToPrevious}
>
<ArrowLeft className='w-4 text-white' />
<ArrowLeft className="w-4 text-white" />
</div>
)}
<div className='relative flex w-5/6 flex-col items-center justify-center gap-2'>
<div className='relative flex min-h-72 w-full items-center justify-center overflow-hidden lg:h-[17rem] lg:w-[38rem]'>
{visibleBanners.map((banner, index) => (
<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 % numberOfVisibleBanners}
className={className}
small={small}
/>
))}
<div className="relative flex w-5/6 flex-col items-center justify-center gap-2">
<div className="relative flex min-h-72 w-full items-center justify-center overflow-hidden lg:h-[17rem] lg:w-[38rem]">
{visibleBanners.map((banner, index) => {
// Only render active banner and immediate neighbors
const isVisible =
Math.abs(index - (activeIndex % numberOfVisibleBanners)) <= 1;
if (!isVisible) return null;
return (
<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 % numberOfVisibleBanners}
className={className}
small={small}
/>
);
})}
</div>
<div className='m-auto flex justify-center'>
<div className="m-auto flex justify-center">
{visibleBanners.map((banner, index) => (
<div
key={index}
className={`mx-1 size-2 cursor-pointer rounded-full ${
activeIndex % numberOfVisibleBanners === index ? 'bg-primary-500' : 'bg-gray-300'
activeIndex % numberOfVisibleBanners === index
? 'bg-primary-500'
: 'bg-gray-300'
}`}
onClick={() => goToIndex(index)}
/>
Expand All @@ -96,7 +104,7 @@ export default function AnnouncementHero({ className = '', small = false }: IAnn
rounded-full bg-primary-500 opacity-50 hover:bg-primary-600 md:opacity-100`}
onClick={goToNext}
>
<ArrowRight className='text-white' />
<ArrowRight className="text-white" />
</div>
)}
</div>
Expand Down

0 comments on commit 63b154c

Please sign in to comment.