feat: fix event section rendering, update eventdata. (#239)

* Feat: improved Upper Slider,lower Slider,fix Responsiveness of EventPage * Feat:fix minor changes * feat:add payment Section in Register Form * feat:update payment section in register page * feat:update payment section in registration page * feat: fix prettier issue * fix: prettier fix * feat: update Payment Section * fix:prettier issue * faet: fix event section rendering, update eventdata.
dscnitrourkela · Nov 1, 2024 · b02e906 · b02e906
1 parent 7674d5d
commit b02e906
Show file tree

Hide file tree

Showing 12 changed files with 170 additions and 405 deletions.
diff --git a/src/app/events/page.jsx b/src/app/events/page.jsx
@@ -4,12 +4,11 @@ import { EventsContainer, Heading3 } from './page.style';
 import MainCarousel from '@/components/EventsPage/index';
 import { FlagshipData } from '@/config/content/EventsPage/FlagshipEvents/Data';
 import { ExhibitionData } from '@/config/content/EventsPage/Exhibition/Data';
-import { ME_descriptionItems, ME_previewItems } from '@/config/content/EventsPage/MainEvents/Data';
+import { MainEventData } from '@/config/content/EventsPage/MainEvents/Data';
 
 import { FunData } from '@/config/content/EventsPage/FunEvents/Data';
-import { ComingSoon } from '@/components/EventsPage/ComingSoon';
 import { GalleryWrapper } from '@/components/EventsPage/Gallery/CardWrapper';
-import { DtsData, dtsData } from '@/config/content/EventsPage/DTS_Shows/Data';
+import { DtsData } from '@/config/content/EventsPage/DTS_Shows/Data';
 import { GlData } from '@/config/content/EventsPage/GuestLecture/Data';
 
 export default function Page() {
@@ -19,8 +18,7 @@ export default function Page() {
         <Heading3>FLAGSHIP EVENTS</Heading3>
         <MainCarousel EventItem={FlagshipData} />
         <Heading3>MAIN EVENTS</Heading3>
-        {/* <MainCarousel previewItems={ME_previewItems} descriptionItems={ME_descriptionItems} /> */}
-        <ComingSoon />
+        <MainCarousel EventItem={MainEventData} />
         <Heading3>FUN EVENTS</Heading3>
         <MainCarousel EventItem={FunData} />
         <Heading3>EXHIBITION</Heading3>

diff --git a/src/components/Carousel/Carousel.jsx b/src/components/Carousel/Carousel.jsx
@@ -1,12 +1,10 @@
 'use client';
-
 import { useState, useEffect, useRef } from 'react';
 import { useAnimate } from 'framer-motion';
 import { Swiper } from 'swiper/react';
 import { Autoplay, Pagination } from 'swiper/modules';
-import { ScreenViewContainer, SliderContainer } from './Carousel.styles';
+import { ScreenViewContainer, SliderContainer, Wrapper } from './Carousel.styles';
 import { LeftArrowButton, RightArrowButton } from '../EventsPage/Shared/ArrowButton';
-import DescriptionCarousel from '../EventsPage/Carousel/DescriptionCarousel';
 import '../EventsPage/Carousel/swiper.css';
 
 export const SwiperCarousel = ({
@@ -23,22 +21,14 @@ export const SwiperCarousel = ({
   const slideWidth = 456.74;
 
   useEffect(() => {
-    const updateScreenSize = () => {
-      setIsMobile(typeof window !== 'undefined' && window.innerWidth < 900);
-    };
-
+    const updateScreenSize = () => setIsMobile(window.innerWidth < 900);
     updateScreenSize();
     window.addEventListener('resize', updateScreenSize);
     return () => window.removeEventListener('resize', updateScreenSize);
   }, []);
 
-  const handleNext = () => {
-    swiperRef.current?.swiper.slideNext();
-  };
-
-  const handlePrev = () => {
-    swiperRef.current?.swiper.slidePrev();
-  };
+  const handleNext = () => swiperRef.current?.swiper.slideNext();
+  const handlePrev = () => swiperRef.current?.swiper.slidePrev();
 
   const onSlideChange = (swiper) => {
     const newIndex = swiper.realIndex;
@@ -54,40 +44,38 @@ export const SwiperCarousel = ({
       animate(
         scope.current,
         { x: xOffset },
-        {
-          duration: 7,
-          ease: [0.42, 0, 0.58, 1],
-          type: 'tween',
-        },
+        { duration: 7, ease: [0.42, 0, 0.58, 1], type: 'tween' },
       );
     }
   }, [currentIndex, animate, scope]);
 
   return (
-    <ScreenViewContainer>
-      <LeftArrowButton
-        onClick={handlePrev}
-        style={{ position: 'absolute', left: '10px', top: '50%', zIndex: 10 }}
-      />
-      <SliderContainer>
-        <Swiper
-          ref={swiperRef}
-          slidesPerView={isMobile ? 1 : 3}
-          centeredSlides
-          loop
-          spaceBetween={isMobile ? 30 : 0}
-          onSlideChange={onSlideChange}
-          modules={[Pagination, Autoplay]}
-          autoplay={{ delay: isEventSection ? 3000 : 15000, disableOnInteraction: false }}
-          className={isMobile ? mobileViewClassName : desktopViewClassname}
-        >
-          {mapFunction()}
-        </Swiper>
-      </SliderContainer>
-      <RightArrowButton
-        onClick={handleNext}
-        style={{ position: 'absolute', right: '10px', top: '50%', zIndex: 10 }}
-      />
-    </ScreenViewContainer>
+    <Wrapper>
+      <ScreenViewContainer>
+        <LeftArrowButton
+          onClick={handlePrev}
+          style={{ position: 'absolute', left: '10px', top: '50%', zIndex: 10 }}
+        />
+        <SliderContainer>
+          <Swiper
+            ref={swiperRef}
+            slidesPerView={isMobile ? 1 : 3}
+            centeredSlides
+            loop
+            spaceBetween={isMobile ? 30 : 0}
+            onSlideChange={onSlideChange}
+            modules={[Pagination, Autoplay]}
+            autoplay={{ delay: isEventSection ? 3000 : 15000, disableOnInteraction: false }}
+            className={isMobile ? mobileViewClassName : desktopViewClassname}
+          >
+            {mapFunction()}
+          </Swiper>
+        </SliderContainer>
+        <RightArrowButton
+          onClick={handleNext}
+          style={{ position: 'absolute', right: '10px', top: '50%', zIndex: 10 }}
+        />
+      </ScreenViewContainer>
+    </Wrapper>
   );
 };
diff --git a/src/components/Carousel/Carousel.styles.jsx b/src/components/Carousel/Carousel.styles.jsx
@@ -2,15 +2,15 @@ import tw from 'twin.macro';
 import styled from 'styled-components';
 
 export const Wrapper = styled.div`
-  ${tw`w-full min-h-screen h-auto flex flex-col `}
+  ${tw`w-full h-auto flex flex-col `}
 `;
 
 export const ScreenViewContainer = styled.div`
   ${tw`relative flex justify-center items-center h-auto`}
 `;
 
 export const SliderContainer = styled.div`
-  ${tw`pb-5 overflow-x-hidden h-auto relative`}
+  ${tw`overflow-x-hidden h-auto relative`}
 `;
 
 export const SwiperConatiner = styled.div`

diff --git a/src/components/EventsPage/CardComponents/PreviewCard.jsx b/src/components/EventsPage/CardComponents/PreviewCard.jsx
@@ -80,13 +80,18 @@ const PreviewCard = memo(
         <PreviewCardContent>{truncatedDescription}</PreviewCardContent>
         <PreviewButtonContainer>
           <PreviewMoreInfoButton2>{renderRulebook}</PreviewMoreInfoButton2>
-          <PreviewMoreInfoButton
-            onClick={isRegistered ? handleToast : handleClick}
-            disabled={loading}
-            aria-label={buttonText}
-          >
-            {buttonText}
-          </PreviewMoreInfoButton>
+
+          {link ? (
+            <PreviewMoreInfoButton
+              onClick={isRegistered ? handleToast : handleClick}
+              disabled={loading}
+              aria-label={buttonText}
+            >
+              {buttonText}
+            </PreviewMoreInfoButton>
+          ) : (
+            ''
+          )}
         </PreviewButtonContainer>
       </PreviewCardContainer>
     );

diff --git a/src/components/EventsSection/shared/AllEvents.jsx b/src/components/EventsSection/shared/AllEvents.jsx
@@ -2,12 +2,6 @@ import { DtsData } from '@/config/content/EventsPage/DTS_Shows/Data';
 import { ExhibitionData } from '@/config/content/EventsPage/Exhibition/Data';
 import { FunData } from '@/config/content/EventsPage/FunEvents/Data';
 import { GlData } from '@/config/content/EventsPage/GuestLecture/Data';
-import { ME_descriptionItems } from '@/config/content/EventsPage/MainEvents/Data';
+import { MainEventData, ME_descriptionItems } from '@/config/content/EventsPage/MainEvents/Data';
 
-export const AllEvents = [
-  ...FunData,
-  ...ME_descriptionItems,
-  ...ExhibitionData,
-  ...DtsData,
-  ...GlData,
-];
+export const AllEvents = [...FunData, ...MainEventData, ...ExhibitionData, ...DtsData, ...GlData];
diff --git a/src/components/EventsSection/shared/Button.jsx b/src/components/EventsSection/shared/Button.jsx
@@ -1,4 +1,3 @@
-import { RegisterButton } from '@/components/Marginals/navbar/navbar.styles';
 import { PrimaryButton } from '@/components/shared/Typography/Buttons';
 import Link from 'next/link';
 

diff --git a/src/components/EventsSection/wrapperComponents/Body.jsx b/src/components/EventsSection/wrapperComponents/Body.jsx
@@ -5,7 +5,7 @@ import { CardWrapper } from './CardWrapper';
 export const Body = () => {
   return (
     <>
-      <div className='flex flex-col justify-center items-center gap-10 py-20 px-5  xsm:p-6 sm:p-8 md:p-0 md:pb-20  bg-black bg-opacity-50 overflow-hidden'>
+      <div className='flex flex-col justify-center items-center gap-10 py-20 sm:p-8 md:p-0 md:pb-20  bg-black bg-opacity-50 overflow-hidden'>
         <CardWrapper />
         <SubHeader />
         <Button />

diff --git a/src/components/EventsSection/wrapperComponents/CardWrapper.jsx b/src/components/EventsSection/wrapperComponents/CardWrapper.jsx
@@ -4,8 +4,10 @@ import '../../EventsPage/Carousel/swiper.css';
 import { AllEvents } from '../shared/AllEvents';
 import { CardLabel } from '../eventCardComponents/Cardlabel';
 import { SwiperCarousel } from '@/components/Carousel/Carousel';
+import { useState } from 'react';
 
 export const CardWrapper = () => {
+  const [isEventSection] = useState(true);
   const renderSlides = () =>
     AllEvents.map((item, index) => (
       <SwiperSlide key={index}>
@@ -22,7 +24,7 @@ export const CardWrapper = () => {
       onIndexChange={null}
       desktopViewClassname='mySwiper3'
       mobileViewClassName='mySwiper4'
-      isEventSection
+      isEventSection={isEventSection}
     />
   );
 };
diff --git a/src/config/content/EventsPage/FlagshipEvents/Data.js b/src/config/content/EventsPage/FlagshipEvents/Data.js
@@ -6,6 +6,7 @@ export const FlagshipData = [
       ' "In the race of innovation, speed is not just an advantage"; it’s the only option. Get ready for Death Race, a two-day robotics competition where participants drive their robots through a track filled with obstacles and challenges. The fastest robot to navigate the course and score the most points wins. Brace yourself for an intense and thrilling showdown!',
     ImageURL:
       'https://res.cloudinary.com/dwfon2ikz/image/upload/v1729179008/inno-2024/Event%20Posters/Cyborg/DeathRace/ljimi3k8z9jb1ee75jgr.jpg',
+    Rulebook: 'https://drive.google.com/open?id=12RIvja14ve3uInA9wwwztDACrvi3X_Ci',
     Location: 'SAC (In front of SAC stairs)',
     Date: 'Day 2, Day 3',
     Time: '9 AM',
@@ -19,6 +20,8 @@ export const FlagshipData = [
     ImageURL:
       'https://res.cloudinary.com/dwfon2ikz/image/upload/v1729179013/inno-2024/Event%20Posters/UDAAN/v4yhrdzyfrok0vnweijv.png',
     Location: 'STS Ground',
+    Rulebook:
+      'https://drive.google.com/file/d/1MLd5jP5KfvUjQsQkiAmo6EPU0KfQ7vF8/view?usp=drive_link',
     Date: 'Day 2',
     Time: '2 PM',
     Prizes: '₹15000',
@@ -31,6 +34,7 @@ export const FlagshipData = [
     ImageURL:
       'https://res.cloudinary.com/duvkctvfr/image/upload/v1729428502/INNO_events/Inno%20Club%20Posters/zpkcnqvep4f1opnxmjxv.png',
     Location: 'LA-204',
+    Rulebook: 'https://drive.google.com/open?id=1Z9zLd0CdDhMqT12tnjsPbe2ZRxI0qUva',
     Date: 'DAY 2 & 3',
     Time: 'ALL DAY',
     Prizes: '₹6000',
@@ -43,6 +47,7 @@ export const FlagshipData = [
     ImageURL:
       'https://res.cloudinary.com/duvkctvfr/image/upload/v1729429077/INNO_events/Inno%20Club%20Posters/vgwmdwxxu7secw0nrvwl.jpg',
     Location: 'LA-1 Cycle Parking',
+    Rulebook: 'https://drive.google.com/open?id=1Kxt1qVCS6xK2qcX_63SQmRj-XQJkMy7g',
     Date: 'DAY 2 & 3',
     Time: 'ALL DAY',
     Prizes: '₹8000',
@@ -55,6 +60,7 @@ export const FlagshipData = [
     ImageURL: 'https://socialcry.com/wp-content/uploads/2024/10/innovision-omega-poster.png',
     Location: 'LA Lawns, LA 004, LA 009, Academic Area',
     Date: 'Day 2',
+    Rulebook: 'https://drive.google.com/open?id=1jy98okGN6yeKQJAuJlXvS59Qa1TpYWrh',
     Time: '3 PM',
     Prizes: '₹8000',
   },
@@ -66,6 +72,7 @@ export const FlagshipData = [
     ImageURL:
       'https://res.cloudinary.com/duvkctvfr/image/upload/v1729429473/INNO_events/Inno%20Club%20Posters/vjw0omni0qbjzzasvu6e.png',
     Location: 'LA-204',
+    Rulebook: 'https://drive.google.com/open?id=1RZcGSiwNF-0BOzjU67XngYXsNIRjVBp3',
     Date: 'Day 2',
     Time: '2 PM',
     Prizes: '₹8000',
@@ -78,6 +85,7 @@ export const FlagshipData = [
     ImageURL:
       'https://res.cloudinary.com/dwfon2ikz/image/upload/v1729179001/inno-2024/Event%20Posters/Astro_NITR/clqps60ndso26fmw101a.png',
     Location: 'TBA',
+    Rulebook: '',
     Date: 'DAY 1 & 2',
     Time: '10 PM - 2 AM',
     Prizes: '',

diff --git a/src/config/content/EventsPage/FunEvents/Data.js b/src/config/content/EventsPage/FunEvents/Data.js
@@ -1,6 +1,7 @@
 export const FunData = [
   {
     eventID: '671bd4eaaacbd171687071f3',
+    Heading: 'QUICK HANDS',
     ImageURL: 'https://res.cloudinary.com/dwfon2ikz/image/upload/v1729797486/Quick_Hand_aeeiun.jpg',
     Description:
       'The Quick Hand Game is a thrilling test of speed and reflexes! Players dive into rapid-fire challenges grab in the blink of an eye. Whether for fun or focus, it’s guaranteed to keep you on your toes! Time: 9-5 ,Day : All three days',
@@ -11,6 +12,7 @@ export const FunData = [
   },
   {
     eventID: '671bd4eaaacbd171687071f4',
+    Heading: 'GUESS THE CHARACTER',
     ImageURL:
       'https://res.cloudinary.com/dwfon2ikz/image/upload/v1729797484/Guess_The_Character_hnrfn5.jpg',
     Description:
@@ -22,6 +24,7 @@ export const FunData = [
   },
   {
     eventID: '671bd4eaaacbd171687071f7',
+    Heading: 'GEL-BLASTER COMBACT',
     ImageURL:
       'https://res.cloudinary.com/dwfon2ikz/image/upload/v1729797482/Gel_Blaster_bdckk8.png',
     Description:
@@ -33,6 +36,7 @@ export const FunData = [
   },
   {
     eventID: '671bd4eaaacbd171687071f2',
+    Heading: 'BOX CRICKET',
     ImageURL:
       'https://res.cloudinary.com/dwfon2ikz/image/upload/v1729797483/Box_Cricket_t2tvi5.jpg',
     Description:
@@ -44,6 +48,7 @@ export const FunData = [
   },
   {
     eventID: '671bd4eaaacbd171687071f0',
+    Heading: 'SOFT ARCHERY',
     ImageURL:
       'https://res.cloudinary.com/dwfon2ikz/image/upload/v1729797486/Soft_Archery_zmfbve.jpg',
     Description:
@@ -55,6 +60,7 @@ export const FunData = [
   },
   {
     eventID: '671bd4eaaacbd171687071f1',
+    Heading: 'BALLOON SHOOTING',
     ImageURL:
       'https://res.cloudinary.com/dwfon2ikz/image/upload/v1729797484/Balloon_Shooting_qlpxxp.jpg',
     Description:
@@ -66,6 +72,7 @@ export const FunData = [
   },
   {
     eventID: '671bd4eaaacbd171687071f5',
+    Heading: 'CUP TIC-TAC-TOE',
     ImageURL:
       'https://res.cloudinary.com/dwfon2ikz/image/upload/v1729797484/Cup_Tic_Tac_Toe_vfa3l1.jpg',
     Description:
@@ -77,6 +84,7 @@ export const FunData = [
   },
   {
     eventID: '671bd4eaaacbd171687071f6',
+    Heading: 'BODY ZORBING',
     ImageURL:
       'https://res.cloudinary.com/dwfon2ikz/image/upload/v1729797485/Body_Zorbing_podoll.jpg',
     Description:
@@ -86,26 +94,26 @@ export const FunData = [
     Time: 'TBA',
     Prizes: 'TBA',
   },
-  {
-    eventID: '671bd4eaaacbd171687071f8',
-    ImageURL:
-      'https://res.cloudinary.com/dwfon2ikz/image/upload/v1729798002/INNO%20Fun%20Event/Club%20Events/Poster/vjbasjosguxlk77acgj0.jpg',
-    Description:
-      'Contestants will have a limited time to perform their stand-up routine in front of a live audience and a panel of judges. Each performer will be judged on originality, delivery, stage presence, and of course, how hard they make the audience laugh. The winner will walk away with exciting prizes, and will earn the title of "LOL Champion!"',
-    Location: 'TBA',
-    Date: 'TBA',
-    Time: 'TBA',
-    Prizes: 'TBA',
-  },
-  {
-    eventID: '671bd4eaaacbd171687071f9',
-    ImageURL:
-      'https://res.cloudinary.com/dwfon2ikz/image/upload/v1729798001/INNO%20Fun%20Event/Club%20Events/Poster/af35sfcdk1mqojxgxy8p.jpg',
-    Description:
-      'Drift-a-thon, a Slow Cycle Race, is basically a fun fundraising event in Innovision. The race aims to raise funds through minimal entry fees charged to the participating students. Participants will compete to maintain the slowest speed on their bicycles without touching the ground.',
-    Location: 'TBA',
-    Date: 'TBA',
-    Time: 'TBA',
-    Prizes: 'TBA',
-  },
+  //   {
+  //     eventID: '671bd4eaaacbd171687071f8',
+  //     ImageURL:
+  //       'https://res.cloudinary.com/dwfon2ikz/image/upload/v1729798002/INNO%20Fun%20Event/Club%20Events/Poster/vjbasjosguxlk77acgj0.jpg',
+  //     Description:
+  //       'Contestants will have a limited time to perform their stand-up routine in front of a live audience and a panel of judges. Each performer will be judged on originality, delivery, stage presence, and of course, how hard they make the audience laugh. The winner will walk away with exciting prizes, and will earn the title of "LOL Champion!"',
+  //     Location: 'TBA',
+  //     Date: 'TBA',
+  //     Time: 'TBA',
+  //     Prizes: 'TBA',
+  //   },
+  //   {
+  //     eventID: '671bd4eaaacbd171687071f9',
+  //     ImageURL:
+  //       'https://res.cloudinary.com/dwfon2ikz/image/upload/v1729798001/INNO%20Fun%20Event/Club%20Events/Poster/af35sfcdk1mqojxgxy8p.jpg',
+  //     Description:
+  //       'Drift-a-thon, a Slow Cycle Race, is basically a fun fundraising event in Innovision. The race aims to raise funds through minimal entry fees charged to the participating students. Participants will compete to maintain the slowest speed on their bicycles without touching the ground.',
+  //     Location: 'TBA',
+  //     Date: 'TBA',
+  //     Time: 'TBA',
+  //     Prizes: 'TBA',
+  //   },
 ];