From a779ccf91130e7478ce03cd1cc316ba6f21c13b8 Mon Sep 17 00:00:00 2001 From: SANTHSIM22 Date: Sun, 3 Nov 2024 21:22:27 +0530 Subject: [PATCH 1/3] refactor: performer's and previous edition --- .../ui/container-scroll-animation.tsx | 2 +- src/components/ui/dialog.tsx | 11 +- src/components/widget/header.tsx | 2 +- src/components/widget/performers.tsx | 245 ++++++++++-------- 4 files changed, 151 insertions(+), 109 deletions(-) diff --git a/src/components/ui/container-scroll-animation.tsx b/src/components/ui/container-scroll-animation.tsx index f7a598e..fe3e675 100644 --- a/src/components/ui/container-scroll-animation.tsx +++ b/src/components/ui/container-scroll-animation.tsx @@ -40,7 +40,7 @@ export const ContainerScroll = ({ ref={containerRef} >
{children} - - - Close - + + + Close + + )); diff --git a/src/components/widget/header.tsx b/src/components/widget/header.tsx index dae2807..e6f26da 100644 --- a/src/components/widget/header.tsx +++ b/src/components/widget/header.tsx @@ -87,7 +87,7 @@ const Nav = () => { if (targetId) { const targetElement = document.getElementById(targetId); if (targetElement) { - const offset = targetElement.getBoundingClientRect().top + window.scrollY - (window.innerHeight * 0.1); + const offset = targetElement.getBoundingClientRect().top + window.scrollY - (window.innerHeight * 0.12); window.scrollTo({ top: offset, behavior: "smooth", diff --git a/src/components/widget/performers.tsx b/src/components/widget/performers.tsx index 0fb164d..a178a14 100644 --- a/src/components/widget/performers.tsx +++ b/src/components/widget/performers.tsx @@ -1,20 +1,21 @@ -/* eslint-disable @next/next/no-img-element */ -"use client"; +"use client" -import { useEffect, useRef, useState } from "react"; -import { gsap } from "gsap"; -import { ScrollTrigger } from "gsap/ScrollTrigger"; -import Lenis from "@studio-freight/lenis"; -import { useGSAP } from "@gsap/react"; -import { tedxsjecAssetsPrefix } from "@/lib/utils"; +import { useEffect, useRef, useState } from "react" +import { gsap } from "gsap" +import { ScrollTrigger } from "gsap/ScrollTrigger" +import Lenis from "@studio-freight/lenis" +import { useGSAP } from "@gsap/react" +import { tedxsjecAssetsPrefix } from "@/lib/utils" +import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog" +import { X } from "lucide-react" -gsap.registerPlugin(ScrollTrigger); +gsap.registerPlugin(ScrollTrigger) interface PerformerSection { - images: string[]; - name: String; - profession: string; - description: string; + images: string[] + name: string + profession: string + description: string } const performerSections: PerformerSection[] = [ @@ -22,36 +23,33 @@ const performerSections: PerformerSection[] = [ name: "Yukthi Udupa", profession: "Bharatanatyam artist", description: - "Yukthi Udupa, a passionate Bharatanatyam artist, began her journey at 12 under Guru Vid Smt. Pravitha Ashok at Nritya Vasantha Natyalaya® Kundapura. She completed her “Vidwath” exams with distinction and earned the Karnataka State Music and Dance Scholarship. Yukthi has won numerous awards, including “Natya Sammohini,” “Yuva Kala Prashasti,” and the “Kalashree Award,” excelling in international, national, and state-level competitions. Her Bharatanatyam Arangetram was a celebrated display of her technical skill and expressive artistry. Yukthi is also a ‘B’ grade Doordarshan artist, inspiring young dancers and honoring Bharatanatyam's legacy.", + "Yukthi Udupa, a passionate Bharatanatyam artist, began her journey at 12 under Guru Vid Smt. Pravitha Ashok at Nritya Vasantha Natyalaya® Kundapura. She completed her exams with distinction and earned the Karnataka State Music and Dance Scholarship. Yukthi has won numerous awards, including and the excelling in international, national, and state-level competitions. Her Bharatanatyam Arangetram was a celebrated display of her technical skill and expressive artistry. Yukthi is also a 'B' grade Doordarshan artist, inspiring young dancers and honoring Bharatanatyam's legacy.", images: [ `${tedxsjecAssetsPrefix}/performers/Yukthi1.avif`, - // `${tedxsjecAssetsPrefix}/performers/Yukthi1.avif`, - // `${tedxsjecAssetsPrefix}/performers/Yukthi1.avif`, - // `${tedxsjecAssetsPrefix}/performers/Yukthi2.avif`, ], }, -]; +] -export default function Performers() { - const containerRef = useRef(null); - const [currentImageIndices, setCurrentImageIndices] = useState( - performerSections.map(() => 0) - ); - const intervalRefs = useRef<(NodeJS.Timeout | null)[]>([]); +export default function Component() { + const containerRef = useRef(null) + const [currentImageIndices, setCurrentImageIndices] = useState(performerSections.map(() => 0)) + const intervalRefs = useRef<(NodeJS.Timeout | null)[]>([]) + const [selectedSection, setSelectedSection] = useState(null) + const [isLargeScreen, setIsLargeScreen] = useState(false) useGSAP(() => { - const lenis = new Lenis({ lerp: 0.07 }); + const lenis = new Lenis({ lerp: 0.07 }) - lenis.on("scroll", ScrollTrigger.update); + lenis.on("scroll", ScrollTrigger.update) gsap.ticker.add((time) => { - lenis.raf(time * 1000); - }); + lenis.raf(time * 1000) + }) gsap.utils .toArray(".img-container") .forEach((container) => { - const img = container.querySelector("img"); + const img = container.querySelector("img") if (img) { gsap.fromTo( @@ -67,96 +65,139 @@ export default function Performers() { end: "bottom top", }, } - ); + ) } - }); - - // Set up hover animations for description - gsap.utils - .toArray(".performer-section") - .forEach((section) => { - const description = section.querySelector(".description"); - const tl = gsap.timeline({ paused: true }); - - tl.fromTo( - description, - { yPercent: 100, opacity: 0 }, - { yPercent: 0, opacity: 1, duration: 0.3, ease: "power2.out" } - ); - - section.addEventListener("mouseenter", () => tl.play()); - section.addEventListener("mouseleave", () => tl.reverse()); - }); + }) + + // Set up hover animations for description on desktop + const mm = gsap.matchMedia() + + mm.add("(min-width: 1200px)", () => { + setIsLargeScreen(true) + gsap.utils + .toArray(".performer-section") + .forEach((section) => { + const description = section.querySelector(".description") + const tl = gsap.timeline({ paused: true }) + + tl.fromTo( + description, + { yPercent: 100, opacity: 0 }, + { yPercent: 0, opacity: 1, duration: 0.3, ease: "power2.out" } + ) + + section.addEventListener("mouseenter", () => tl.play()) + section.addEventListener("mouseleave", () => tl.reverse()) + }) + }) + + mm.add("(max-width: 1200px)", () => { + setIsLargeScreen(false) + }) return () => { - lenis.destroy(); - ScrollTrigger.getAll().forEach((st) => st.kill()); - }; - }, []); + lenis.destroy() + ScrollTrigger.getAll().forEach((st) => st.kill()) + mm.revert() + } + }, []) useEffect(() => { performerSections.forEach((_, index) => { intervalRefs.current[index] = setInterval(() => { setCurrentImageIndices((prevIndices) => { - const newIndices = [...prevIndices]; + const newIndices = [...prevIndices] newIndices[index] = - (newIndices[index] + 1) % performerSections[index].images.length; - return newIndices; - }); - }, 2500 + index * 1000); // Stagger the intervals to make the changes less synchronized - }); + (newIndices[index] + 1) % performerSections[index].images.length + return newIndices + }) + }, 2500 + index * 1000) + }) return () => { - // eslint-disable-next-line react-hooks/exhaustive-deps intervalRefs.current.forEach((interval) => { - if (interval) clearInterval(interval); - }); - }; - }, []); + if (interval) clearInterval(interval) + }) + } + }, []) + + const handleSectionClick = (section: PerformerSection) => { + if (!isLargeScreen) { + setSelectedSection(section) + } + } + + // Effect to disable body scroll when dialog is open + useEffect(() => { + if (selectedSection) { + document.body.classList.add("no-scroll") + } else { + document.body.classList.remove("no-scroll") + } + + return () => document.body.classList.remove("no-scroll") + }, [selectedSection]) return ( -
- {performerSections.map((section, sectionIndex) => ( -
-
- {section.images.map((image, imageIndex) => ( + !open && setSelectedSection(null)}> +
+ {performerSections.map((section, sectionIndex) => ( +
+
handleSectionClick(section)} + > + {section.images.map((image, imageIndex) => ( + {`Performer + ))} +
+

+ {section.name} +

+

+ {section.profession} +

+
+
+

+ {section.description} +

+
+
+
+ ))} +
+ {!isLargeScreen && selectedSection && ( + +
+
{`Performer - ))} -
-

- {section.name} -

-

- {section.profession} -

-
-

- {section.description} -

+
+

{selectedSection.name}

+

{selectedSection.profession}

+

{selectedSection.description}

-
- ))} -
- ); + + )} + + ) } From 13fc6ac196098ea9d6ccd6cb74a64d4f26cac9d1 Mon Sep 17 00:00:00 2001 From: SANTHSIM22 Date: Sun, 3 Nov 2024 21:31:19 +0530 Subject: [PATCH 2/3] fix: build errors --- src/components/widget/performers.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/components/widget/performers.tsx b/src/components/widget/performers.tsx index a178a14..24e1179 100644 --- a/src/components/widget/performers.tsx +++ b/src/components/widget/performers.tsx @@ -6,9 +6,7 @@ import { ScrollTrigger } from "gsap/ScrollTrigger" import Lenis from "@studio-freight/lenis" import { useGSAP } from "@gsap/react" import { tedxsjecAssetsPrefix } from "@/lib/utils" -import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog" -import { X } from "lucide-react" - +import { Dialog, DialogContent } from "@/components/ui/dialog" gsap.registerPlugin(ScrollTrigger) interface PerformerSection { From 37978953ef928182836f64d85808d5cef38fdfe6 Mon Sep 17 00:00:00 2001 From: SANTHSIM22 Date: Mon, 4 Nov 2024 20:53:01 +0530 Subject: [PATCH 3/3] fix: nav links and button --- src/components/edil-ozi/text-glitch.tsx | 2 +- src/components/widget/header.tsx | 13 ++++++++----- 2 files changed, 9 insertions(+), 6 deletions(-) diff --git a/src/components/edil-ozi/text-glitch.tsx b/src/components/edil-ozi/text-glitch.tsx index 2bb205c..43c1403 100644 --- a/src/components/edil-ozi/text-glitch.tsx +++ b/src/components/edil-ozi/text-glitch.tsx @@ -17,7 +17,7 @@ const TextGlitchEffect: FC = ({ textOne, textTwo, className }) => { )} > {textOne} - + {textOne} diff --git a/src/components/widget/header.tsx b/src/components/widget/header.tsx index e6f26da..33b1bdb 100644 --- a/src/components/widget/header.tsx +++ b/src/components/widget/header.tsx @@ -7,9 +7,8 @@ import { ScrollTrigger } from "gsap/ScrollTrigger"; import { tedxsjecAssetsPrefix } from "@/lib/utils"; import React from "react"; import Link from "next/link"; -import SocialLinks from "../common/social-links"; import NavItem from "../navbar/nav-items"; - +import { Button } from "../ui/button"; const Nav = () => { gsap.registerPlugin(ScrollTrigger); @@ -172,9 +171,13 @@ const Nav = () => { handleClick('contact')} />
  • - +