fix: made changes in PreviewCards

dscnitrourkela · Oct 24, 2024 · 15ea579 · 15ea579
1 parent c296395
commit 15ea579
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 5 deletions.
diff --git a/src/components/EventsPage/CardComponents/PreviewCard.jsx b/src/components/EventsPage/CardComponents/PreviewCard.jsx
@@ -6,8 +6,9 @@ import {
   PreviewMoreInfoButton,
   PreviewMoreInfoButton2,
 } from './PreviewCard.style';
+import Link from 'next/link';
 
-function PreviewCard({ ImageURL, PreviewDescription = '' }) {
+function PreviewCard({ ImageURL, PreviewDescription = '', link = '' }) {
   const words = PreviewDescription?.split(' ') || [];
   const truncatedDescription =
     words.length > 30 ? words.slice(0, 50).join(' ') + '...' : PreviewDescription;
@@ -17,8 +18,16 @@ function PreviewCard({ ImageURL, PreviewDescription = '' }) {
       <PreviewCardImage src={ImageURL} alt='image' width={500} height={500} />
       <PreviewCardContent>{truncatedDescription}</PreviewCardContent>
       <PreviewButtonContainer>
-        <PreviewMoreInfoButton2>Rulebook</PreviewMoreInfoButton2>
-        <PreviewMoreInfoButton>Register</PreviewMoreInfoButton>
+        <PreviewMoreInfoButton2>
+          {link === '' ? (
+            'Coming soon'
+          ) : (
+            <Link href={link} target='_blank' rel='noopener noreferrer'>
+              Rulebook
+            </Link>
+          )}
+        </PreviewMoreInfoButton2>
+        {link === '' || <PreviewMoreInfoButton>Register</PreviewMoreInfoButton>}
       </PreviewButtonContainer>
     </PreviewCardContainer>
   );

diff --git a/src/components/EventsPage/Carousel/SliderCarousel/DesktopView.jsx b/src/components/EventsPage/Carousel/SliderCarousel/DesktopView.jsx
@@ -25,7 +25,11 @@ export const LargeScreenView = ({ onSlideChange, swiperRef, currentIndex, previe
               key={index}
               className={`slide ${index === currentIndex ? 'active-slide' : ''}`}
             >
-              <PreviewCard PreviewDescription={item.PreviewDescription} ImageURL={item.ImageURL} />
+              <PreviewCard
+                PreviewDescription={item.PreviewDescription}
+                ImageURL={item.ImageURL}
+                link={item.Rulebook}
+              />
             </SwiperSlide>
           ))}
         </Swiper>

diff --git a/src/components/EventsPage/Carousel/SliderCarousel/MobileView.jsx b/src/components/EventsPage/Carousel/SliderCarousel/MobileView.jsx
@@ -28,7 +28,11 @@ export const MobileView = ({
       >
         {previewItems.map((item, index) => (
           <SwiperSlide key={index}>
-            <PreviewCard PreviewDescription={item.PreviewDescription} ImageURL={item.ImageURL} />
+            <PreviewCard
+              PreviewDescription={item.PreviewDescription}
+              ImageURL={item.ImageURL}
+              link={item.Rulebook}
+            />
           </SwiperSlide>
         ))}
       </Swiper>