Skip to content

Commit

Permalink
wip: swiper and aboutsPage
Browse files Browse the repository at this point in the history
  • Loading branch information
@bhoopesh369
bhoopesh369 committed Dec 12, 2023
1 parent 242ce9d commit 00cd359
Show file tree
Hide file tree
Showing 8 changed files with 131 additions and 99 deletions.
1 change: 1 addition & 0 deletions src/app/events/[clusterId]/[name]/[eventId]/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import Carousel from '@/components/Carousel/carousel';
import styles from '../../../carousel.module.css';

const events = ({ params }: { params: { clusterId: number; name: string; eventId: number } }) => {
console.log(params.clusterId, params.name, params.eventId);
return (
<div className={`min-h-screen w-full text-center lg:p-7 p-5 event + ${styles.event}`}>
<NavBar />
Expand Down
19 changes: 18 additions & 1 deletion src/app/globals.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -95,6 +95,7 @@ body {
from {
opacity: 1;
}

to {
opacity: 0;
}
Expand All @@ -112,6 +113,7 @@ body {
from {
background-color: initial;
}

to {
background-color: #000;
}
Expand All @@ -128,6 +130,7 @@ body {
0% {
opacity: 0;
}

50% {
opacity: 1;
}
Expand Down Expand Up @@ -158,6 +161,7 @@ body {
background-position: center;
background-repeat: no-repeat;
}

.AboutCard {
background: url('../assets/images/aboutCardMOB.png');
background-repeat: no-repeat;
Expand All @@ -173,9 +177,11 @@ body {
.rings {
animation: rings 0.7s;
}

.rings2 {
animation: rings2 0.7s;
}

.fullrings {
animation: fullrings 0.7s;
}
Expand All @@ -184,6 +190,7 @@ body {
0% {
opacity: 0.6;
}

100% {
opacity: 1;
}
Expand All @@ -193,6 +200,7 @@ body {
0% {
transform: translateY(-30vh);
}

90% {
transform: translateY(20vh);
}
Expand All @@ -212,9 +220,11 @@ body {
0% {
opacity: 0;
}

90% {
opacity: 0;
}

100% {
opacity: 1;
}
Expand All @@ -225,13 +235,16 @@ body {
mask-image: radial-gradient(circle, #000 90%, transparent 90%);
mask-position: 0% 0%;
}

80% {
mask-position: 0% 800px;
}

81% {
mask-image: none;
opacity: 0.4;
}

100% {
opacity: 1;
}
Expand Down Expand Up @@ -273,4 +286,8 @@ body {
.about {
min-height: max(100vh, 860px);
}
}
}

.markdown > * {
all: revert;
}
4 changes: 2 additions & 2 deletions src/app/home/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -112,8 +112,8 @@ export default function Home() {
draggable={false}
className="wingman lg:w-48 w-32 absolute inset-0 m-auto bottom-1/3"
/>
<p className="font-ROG lg:text-5xl md:text-4xl sm:text-3xl text-xl">
A TIMELESS ODYSSEY
<p className="font-ROG lg:text-5xl md:text-4xl sm:text-3xl text-xl tracking-wider">
THE SAGA OF TIME
</p>
</div>
<SideBar content={'The Future'} number={'01'} />
Expand Down
2 changes: 1 addition & 1 deletion src/components/AboutCard/AboutCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ const AboutCard: React.FC<AboutCardProps> = ({ cardRef }) => {
<div className="AboutCard max-md:hidden h-fit sm:w-[85%] sm:h-[70%] md:w-[70%] md:h-[65%] lg:w-[60%] lg:h-[70%] xl:w-[45%] xl:h-[55%] flex justify-center items-center p-10 ">
<p
ref={cardRef}
className="pt-3 font-Nunito max-lg:text-base text-lg md:h-[80%] lg:h-[85%] overflow-auto"
className="pt-3 font-Nunito max-lg:text-base text-lg md:h-[80%] lg:h-[85%]"
>
{content}
</p>
Expand Down
14 changes: 8 additions & 6 deletions src/components/Carousel/carousel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,13 +16,13 @@ SwiperCore.use([Navigation, Keyboard]);

const Carousel = ({ id, eventId }: { id: number; eventId: number }) => {
const [details, setDetails] = useState([]);
const [initialSlide, setInitialSlide] = useState(0);
const [initialSlideNumber, setInitialSlideNumber] = useState<number | null>(null);
const getDetails = async () => {
const res = await getClusterDetails(id);
setDetails(res);
res.forEach((data: { ind: number }, ind: number) => {
if (data.ind == eventId) {
setInitialSlide(ind);
res.forEach((data: { id: number }, ind: number) => {
if (data.id == eventId) {
setInitialSlideNumber(ind);
}
});
};
Expand All @@ -31,15 +31,15 @@ const Carousel = ({ id, eventId }: { id: number; eventId: number }) => {
getDetails();
}, []);

return (
return initialSlideNumber !== null ? (
<Swiper
spaceBetween={50}
slidesPerView={1}
navigation={{
nextEl: `.${styles.rightArrow}`,
prevEl: `.${styles.leftArrow}`,
}}
initialSlide={initialSlide}
initialSlide={initialSlideNumber}
keyboard={{ enabled: true }}
className="w-full h-full flex justify-center"
>
Expand All @@ -52,6 +52,8 @@ const Carousel = ({ id, eventId }: { id: number; eventId: number }) => {
<div className={`${styles.rightArrow}`}></div>
<div className={`${styles.leftArrow}`}></div>
</Swiper>
) : (
<p>Oombu</p>
);
};

Expand Down
2 changes: 1 addition & 1 deletion src/components/Carousel/slideData.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -173,7 +173,7 @@ const SlideData: React.FC<SlideDataProps> = ({ details }) => {
<div
className={`w-full h-4/5 font-Nunito 2xl:text-base xl:text-sm lg:text-sm sm:text-xs text-sm p-3 ${styles.content}`}
>
<Markdown className={styles.markdown}>{data}</Markdown>
<Markdown className={styles.markdown + ' markdown'}>{data}</Markdown>
</div>
</div>
</div>
Expand Down
28 changes: 20 additions & 8 deletions src/components/ClusterCarousel/ClusterCarousel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
'use client';

import { Swiper, SwiperSlide } from 'swiper/react';
import { Pagination, Navigation } from 'swiper/modules';
import { Pagination, Navigation, Autoplay } from 'swiper/modules';

import 'swiper/css';
import 'swiper/css/navigation';
Expand All @@ -24,6 +24,7 @@ import { CMS_URL } from '@/config/config';
const ClusterCarousel = ({ id, name }: { id: number; name: string }) => {
const [details, setDetails] = useState<any>([]);
const [index, setIndex] = useState(0);
const [swiper, setSwiper] = useState<any>(null);
const getDetails = async () => {
let res = await getClusterDetails(id);
setDetails(res);
Expand All @@ -34,6 +35,12 @@ const ClusterCarousel = ({ id, name }: { id: number; name: string }) => {
getDetails();
}, []);

useEffect(() => {
if (!details || !swiper) return;
swiper.activeIndex = 0;
console.log('resetting');
}, [details, swiper]);

const breakpoints = {
100: {
slidesPerView: 1,
Expand All @@ -54,9 +61,9 @@ const ClusterCarousel = ({ id, name }: { id: number; name: string }) => {
};

// eslint-disable-next-line @typescript-eslint/no-explicit-any
const [swiper, setSwiper] = useState<any>(null);

const handleSlideChange = (index: number) => {
if (details.length > 0 && index) setIndex(index % details.length);
const currentSlide = swiper?.slides[index];
if (currentSlide) {
currentSlide.style.transform = 'scale(1.0)';
Expand All @@ -80,15 +87,20 @@ const ClusterCarousel = ({ id, name }: { id: number; name: string }) => {
};

const goToNextSlide = () => {
if (swiper) swiper.activeIndex = 1;
swiper?.slideNext();
setIndex((index + 1) % details.length);
if (details.length > 0) {
console.log(swiper.activeIndex);
swiper?.slideNext();
setIndex((index + 1) % details.length);
}
};

const goToPreviousSlide = () => {
if (swiper) swiper.activeIndex = 1;
swiper?.slidePrev();
setIndex((index - 1 + details.length) % details.length);
if (details.length > 0) {
console.log(swiper.activeIndex);
swiper?.slidePrev();
console.log((index - 1 + details.length) % details.length);
setIndex((index - 1 + details.length) % details.length);
}
};

return (
Expand Down
Loading

0 comments on commit 00cd359

Please sign in to comment.