From 50433e2ebfe0442d58c80c1c5e6a593bda796151 Mon Sep 17 00:00:00 2001 From: Achraf Hmimou Date: Sat, 30 Mar 2024 02:07:26 +0100 Subject: [PATCH 01/11] embla version. td: fix errors and orbit style --- package-lock.json | 44 ++++ package.json | 3 + src/app/components/ThroughTheYears.tsx | 16 -- .../ThroughTheYears/EmblaCarousel.tsx | 231 ++++++++++++++++++ .../EmblaCarouselDotButton.tsx | 106 ++++++++ .../ThroughTheYears/ThroughTheYears.tsx | 88 +++++++ src/app/page.tsx | 3 +- 7 files changed, 473 insertions(+), 18 deletions(-) delete mode 100644 src/app/components/ThroughTheYears.tsx create mode 100644 src/app/components/ThroughTheYears/EmblaCarousel.tsx create mode 100644 src/app/components/ThroughTheYears/EmblaCarouselDotButton.tsx create mode 100644 src/app/components/ThroughTheYears/ThroughTheYears.tsx diff --git a/package-lock.json b/package-lock.json index edffa32..130e796 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14,6 +14,9 @@ "@fortawesome/free-solid-svg-icons": "^6.5.1", "@fortawesome/react-fontawesome": "^0.2.0", "@next/third-parties": "^14.1.0", + "embla-carousel-auto-scroll": "^8.0.0", + "embla-carousel-autoplay": "^8.0.0", + "embla-carousel-react": "^8.0.0", "html-react-parser": "^5.1.2", "next": "^14.1.0", "react": "^18", @@ -1526,6 +1529,47 @@ "url": "https://github.com/fb55/domutils?sponsor=1" } }, + "node_modules/embla-carousel": { + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/embla-carousel/-/embla-carousel-8.0.0.tgz", + "integrity": "sha512-ecixcyqS6oKD2nh5Nj5MObcgoSILWNI/GtBxkidn5ytFaCCmwVHo2SecksaQZHcARMMpIR2dWOlSIdA1LkZFUA==" + }, + "node_modules/embla-carousel-auto-scroll": { + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/embla-carousel-auto-scroll/-/embla-carousel-auto-scroll-8.0.0.tgz", + "integrity": "sha512-+bG79hg/BhI4enRevR6fuQdrJevfu3gfNg/S+1kGszXHUJHOOwDQne/dXOnQ12+o74XvDD5t/LG45rAOplehhQ==", + "peerDependencies": { + "embla-carousel": "8.0.0" + } + }, + "node_modules/embla-carousel-autoplay": { + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/embla-carousel-autoplay/-/embla-carousel-autoplay-8.0.0.tgz", + "integrity": "sha512-FWHhZULH5+ydg7fiabwQppCDoTMi8pbMC20lmVytoXn7hH2KAhXHc/8yCUb3yToqMduCN6xPKUONtgzBqz3RZg==", + "peerDependencies": { + "embla-carousel": "8.0.0" + } + }, + "node_modules/embla-carousel-react": { + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/embla-carousel-react/-/embla-carousel-react-8.0.0.tgz", + "integrity": "sha512-qT0dii8ZwoCtEIBE6ogjqU2+5IwnGfdt2teKjCzW88JRErflhlCpz8KjWnW8xoRZOP8g0clRtsMEFoAgS/elfA==", + "dependencies": { + "embla-carousel": "8.0.0", + "embla-carousel-reactive-utils": "8.0.0" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.1 || ^18.0.0" + } + }, + "node_modules/embla-carousel-reactive-utils": { + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/embla-carousel-reactive-utils/-/embla-carousel-reactive-utils-8.0.0.tgz", + "integrity": "sha512-JCw0CqCXI7tbHDRogBb9PoeMLyjEC1vpN0lDOzUjmlfVgtfF+ffLaOK8bVtXVUEbNs/3guGe3NSzA5J5aYzLzw==", + "peerDependencies": { + "embla-carousel": "8.0.0" + } + }, "node_modules/emoji-regex": { "version": "9.2.2", "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz", diff --git a/package.json b/package.json index e08dbfc..889cc12 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,9 @@ "@fortawesome/free-solid-svg-icons": "^6.5.1", "@fortawesome/react-fontawesome": "^0.2.0", "@next/third-parties": "^14.1.0", + "embla-carousel-auto-scroll": "^8.0.0", + "embla-carousel-autoplay": "^8.0.0", + "embla-carousel-react": "^8.0.0", "html-react-parser": "^5.1.2", "next": "^14.1.0", "react": "^18", diff --git a/src/app/components/ThroughTheYears.tsx b/src/app/components/ThroughTheYears.tsx deleted file mode 100644 index 025c6c2..0000000 --- a/src/app/components/ThroughTheYears.tsx +++ /dev/null @@ -1,16 +0,0 @@ -export default function ThroughTheYears() { - return ( -
- {" "} - Coming soon...{" "} -
- ); -} diff --git a/src/app/components/ThroughTheYears/EmblaCarousel.tsx b/src/app/components/ThroughTheYears/EmblaCarousel.tsx new file mode 100644 index 0000000..737ca0f --- /dev/null +++ b/src/app/components/ThroughTheYears/EmblaCarousel.tsx @@ -0,0 +1,231 @@ +import { React, useState, useEffect, useCallback } from "react"; +import { EmblaOptionsType } from "embla-carousel"; +import { DotButton, useDotButton } from "./EmblaCarouselDotButton"; +import useEmblaCarousel from "embla-carousel-react"; +import Image from "next/image"; +import Link from "next/link"; +import AutoScroll from "embla-carousel-auto-scroll"; + +import styled from "styled-components"; + +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { faPlay, faStop } from "@fortawesome/free-solid-svg-icons"; + +type PropType = { + slides: number[]; + options?: EmblaOptionsType; +}; + +const Embla = styled.section` + margin: auto; + max-width: 100%; + --slide-spacing: 1rem; + --slide-size: 100%; + --slide-spacing-sm: 10rem; + --slide-size-sm: 20%; + --slide-spacing-lg: 2rem; + --slide-size-lg: calc(100% / 4); +`; + +const EmblaViewport = styled.div` + overflow: hidden; +`; + +const EmblaContainer = styled.div` + backface-visibility: hidden; + display: flex; + touch-action: pan-y; + margin-left: calc(var(--slide-spacing) * -1); + + @media (min-width: 300px) { + margin-left: calc(var(--slide-spacing-sm) * -1); + } + + @media (min-width: 750px) { + margin-left: calc(var(--slide-spacing-lg) * -1); + } +`; + +const EmblaSlide = styled.div` + min-width: 0; + flex: 0 0 var(--slide-size); + padding-left: var(--slide-spacing); + display: flex; + justify-content: center; + align-items: center; + text-align: center; + + @media (min-width: 300px) { + flex: 0 0 var(--slide-size-sm); + padding-left: var(--slide-spacing-sm); + } + + @media (min-width: 750px) { + padding-left: var(--slide-spacing-sm); + } + + @media (min-width: 1200px) { + flex: 0 0 var(--slide-size-lg); + padding-left: var(--slide-spacing-lg); + } +`; + +const EmblaSlideNumber = styled.div` + border-radius: 1.8rem; + font-size: 4rem; + font-weight: 600; + display: flex; + align-items: center; + justify-content: center; + height: var(--slide-height); +`; + +const EmblaControls = styled.div` + display: flex; + justify-content: center; + align-items: center; + margin-top: 1.8rem; + + @media (max-width: 767px) { + display: none; + } +`; + +const EmblaButtons = styled.div` + display: flex; + gap: 0.6rem; + align-items: center; +`; + +const EmblaButton = styled.button` + -webkit-appearance: none; + appearance: none; + background-color: transparent; + touch-action: manipulation; + display: inline-flex; + text-decoration: none; + cursor: pointer; + border: 0; + padding: 0; + margin: 0; + width: 3.6rem; + height: 3.6rem; + z-index: 1; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; +`; + +const EmblaButtonSvg = styled.svg` + width: 35%; + height: 35%; +`; + +const EmblaDots = styled.div` + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; +`; + +const EmblaPlay = styled.button` + -webkit-appearance: none; + text-decoration: none; + cursor: url("/rocket-fire.png"), auto; + display: flex; + font-size: 1.5rem; + background-color: black; + border: none; + margin: 0px 0px 0px 10px; +`; + +const EmblaCarousel: React.FC = (props) => { + const { slides, options } = props; + const [emblaRef, emblaApi] = useEmblaCarousel(options, [ + AutoScroll({ playOnInit: true }), + ]); + const [isPlaying, setIsPlaying] = useState(false); + + const { selectedIndex, scrollSnaps, onDotButtonClick } = + useDotButton(emblaApi); + + const onButtonAutoplayClick = useCallback( + (callback: () => void) => { + const autoScroll = emblaApi?.plugins()?.autoScroll; + if (!autoScroll) return; + + const resetOrStop = + autoScroll.options.stopOnInteraction === false + ? autoScroll.reset + : autoScroll.stop; + + resetOrStop(); + callback(); + }, + [emblaApi], + ); + + const toggleAutoplay = useCallback(() => { + const autoScroll = emblaApi?.plugins()?.autoScroll; + if (!autoScroll) return; + + const playOrStop = autoScroll.isPlaying() + ? autoScroll.stop + : autoScroll.play; + playOrStop(); + }, [emblaApi]); + + useEffect(() => { + const autoScroll = emblaApi?.plugins()?.autoScroll; + if (!autoScroll) return; + + setIsPlaying(autoScroll.isPlaying()); + emblaApi + .on("autoScroll:play", () => setIsPlaying(true)) + .on("autoScroll:stop", () => setIsPlaying(false)) + .on("reInit", () => setIsPlaying(false)); + }, [emblaApi]); + + return ( + + + + {slides.map((edition, index, currentIndex) => ( + + + altText +

{edition.name}

+

{edition.date}

+ + + ))} + + + + + {scrollSnaps.map((_, index) => ( + onDotButtonClick(index)} + selected={selectedIndex === index} + /> + ))} + + + + + + + ); +}; + +export default EmblaCarousel; diff --git a/src/app/components/ThroughTheYears/EmblaCarouselDotButton.tsx b/src/app/components/ThroughTheYears/EmblaCarouselDotButton.tsx new file mode 100644 index 0000000..e00b8ba --- /dev/null +++ b/src/app/components/ThroughTheYears/EmblaCarouselDotButton.tsx @@ -0,0 +1,106 @@ +import React, { + PropsWithChildren, + useCallback, + useEffect, + useState, +} from "react"; +// eslint-disable-next-line import/no-extraneous-dependencies +import { EmblaCarouselType } from "embla-carousel"; +import styled from "styled-components"; + +type UseDotButtonType = { + selectedIndex: number; + scrollSnaps: number[]; + onDotButtonClick: (index: number) => void; +}; + +export const useDotButton = ( + emblaApi: EmblaCarouselType | undefined, +): UseDotButtonType => { + const [selectedIndex, setSelectedIndex] = useState(0); + const [scrollSnaps, setScrollSnaps] = useState([]); + + const onDotButtonClick = useCallback( + (index: number) => { + if (!emblaApi) return; + emblaApi.scrollTo(index); + }, + [emblaApi], + ); + + const onInit = useCallback((emblaApi: EmblaCarouselType) => { + setScrollSnaps(emblaApi.scrollSnapList()); + }, []); + + const onSelect = useCallback((emblaApi: EmblaCarouselType) => { + setSelectedIndex(emblaApi.selectedScrollSnap()); + }, []); + + useEffect(() => { + if (!emblaApi) return; + + onInit(emblaApi); + onSelect(emblaApi); + emblaApi.on("reInit", onInit); + emblaApi.on("reInit", onSelect); + emblaApi.on("select", onSelect); + }, [emblaApi, onInit, onSelect]); + + return { + selectedIndex, + scrollSnaps, + onDotButtonClick, + }; +}; + +type PropType = PropsWithChildren< + React.DetailedHTMLProps< + React.ButtonHTMLAttributes, + HTMLButtonElement + > +>; + +const EmblaDot = styled.button` + appearance: none; + touch-action: manipulation; + display: inline-flex; + text-decoration: none; + cursor: url("/rocket-fire.png"), auto; + border: 0; + padding: 0; + margin: 0.1rem; + width: 1rem; + height: 1rem; + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + position: relative; + background-color: ${(props) => + props.selected + ? "orangered" + : "slategray"}; // Change 'blue' to your desired color + + + &::after { + width: 1rem; + height: 1rem; + border-radius: 50%; + display: flex; + align-items: center; + content: ""; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +`; + +export const DotButton: React.FC = (props) => { + const { children, ...restProps } = props; + + return ( + + {children} + + ); +}; diff --git a/src/app/components/ThroughTheYears/ThroughTheYears.tsx b/src/app/components/ThroughTheYears/ThroughTheYears.tsx new file mode 100644 index 0000000..9200815 --- /dev/null +++ b/src/app/components/ThroughTheYears/ThroughTheYears.tsx @@ -0,0 +1,88 @@ +import React from "react"; + +import styled, { keyframes } from "styled-components"; +import { Section } from "@/app/genericComponents/General"; +import { SectionTitle } from "@/app/genericComponents/Typography"; +import useEmblaCarousel from "embla-carousel-react"; +import EmblaCarousel from "./EmblaCarousel"; +// eslint-disable-next-line import/no-extraneous-dependencies +import { EmblaOptionsType } from "embla-carousel"; + +export default function ThroughTheYears() { + const PREVIOUS_EDITIONS = [ + { + name: "Fall 2016", + date: "October 23-25", + img: "/Planets/planetPartner.svg", + url: "", + }, + { + name: "Winter 2016", + date: "May 8-12", + img: "/Planets/planetSponsor.svg", + url: "", + }, + { + name: "Fall 2017", + date: "May 3-5", + img: "/Planets/planetMentor.svg", + url: "", + }, + { + name: "Winter 2017", + date: "May 3-5", + img: "/Planets/planetVolunteer.svg", + url: "", + }, + { + name: "2018", + date: "May 3-5", + img: "/Planets/planetPartner.svg", + url: "https://2018.hackupc.com/", + }, + { + name: "2019", + date: "May 3-5", + img: "/Planets/planetSponsor.svg", + url: "https://2019.hackupc.com/", + }, + { + name: "2020", + date: "CANCELLED", + img: "/Planets/planetMentor.svg", + url: "", + }, + { + name: "2021", + date: "May 3-5", + img: "/Planets/planetVolunteer.svg", + url: "https://2021.hackupc.com/", + }, + { + name: "2022", + date: "May 3-5", + img: "/Planets/planetVolunteer.svg", + url: "https://2022.hackupc.com/", + }, + { + name: "2023", + date: "May 3-5", + img: "/Planets/planetVolunteer.svg", + url: "https://2023.hackupc.com/", + }, + ]; + + const [emblaRef] = useEmblaCarousel(); + const OPTIONS: EmblaOptionsType = { + align: "start", + loop: true, + slidesToScroll: 2, + }; + + return ( +
+ Through The Years + +
+ ); +} diff --git a/src/app/page.tsx b/src/app/page.tsx index 1e7df11..a130cac 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -10,11 +10,10 @@ import FAQs from "@/app/components/FAQs"; import Socials from "@/app/components/Socials"; import SponsorsAndPartners from "@/app/components/SponsorsAndPartners"; import Hackers from "@/app/components/Hackers"; -// TODO: import ThroughTheYears from "@/app/components/ThroughTheYears"; import Hero from "./components/Hero"; import Header from "@/app/components/Header"; import Footer from "@/app/components/Footer"; -import ThroughTheYears from "@/app/components/ThroughTheYears"; +import ThroughTheYears from "@/app/components/ThroughTheYears/ThroughTheYears"; import { Background } from "@/app/genericComponents/General"; export default function Home() { From a93e9fed46d0f4d6b2a87ccfd7f647bb33cb7013 Mon Sep 17 00:00:00 2001 From: Achraf Hmimou Date: Sat, 30 Mar 2024 14:07:31 +0100 Subject: [PATCH 02/11] fix EsLint --- src/app/components/Header.tsx | 2 +- .../ThroughTheYears/EmblaCarousel.tsx | 53 +++---------------- .../ThroughTheYears/ThroughTheYears.tsx | 3 -- 3 files changed, 7 insertions(+), 51 deletions(-) diff --git a/src/app/components/Header.tsx b/src/app/components/Header.tsx index c29dae2..432c60c 100644 --- a/src/app/components/Header.tsx +++ b/src/app/components/Header.tsx @@ -54,7 +54,7 @@ export default function Header() { }, []); return ( - + { window.scroll({ diff --git a/src/app/components/ThroughTheYears/EmblaCarousel.tsx b/src/app/components/ThroughTheYears/EmblaCarousel.tsx index 737ca0f..e014798 100644 --- a/src/app/components/ThroughTheYears/EmblaCarousel.tsx +++ b/src/app/components/ThroughTheYears/EmblaCarousel.tsx @@ -1,4 +1,6 @@ +// @ts-ignore import { React, useState, useEffect, useCallback } from "react"; +// eslint-disable-next-line import/no-extraneous-dependencies import { EmblaOptionsType } from "embla-carousel"; import { DotButton, useDotButton } from "./EmblaCarouselDotButton"; import useEmblaCarousel from "embla-carousel-react"; @@ -69,17 +71,6 @@ const EmblaSlide = styled.div` padding-left: var(--slide-spacing-lg); } `; - -const EmblaSlideNumber = styled.div` - border-radius: 1.8rem; - font-size: 4rem; - font-weight: 600; - display: flex; - align-items: center; - justify-content: center; - height: var(--slide-height); -`; - const EmblaControls = styled.div` display: flex; justify-content: center; @@ -90,38 +81,6 @@ const EmblaControls = styled.div` display: none; } `; - -const EmblaButtons = styled.div` - display: flex; - gap: 0.6rem; - align-items: center; -`; - -const EmblaButton = styled.button` - -webkit-appearance: none; - appearance: none; - background-color: transparent; - touch-action: manipulation; - display: inline-flex; - text-decoration: none; - cursor: pointer; - border: 0; - padding: 0; - margin: 0; - width: 3.6rem; - height: 3.6rem; - z-index: 1; - border-radius: 50%; - display: flex; - align-items: center; - justify-content: center; -`; - -const EmblaButtonSvg = styled.svg` - width: 35%; - height: 35%; -`; - const EmblaDots = styled.div` display: flex; flex-wrap: wrap; @@ -141,6 +100,7 @@ const EmblaPlay = styled.button` `; const EmblaCarousel: React.FC = (props) => { + // eslint-disable-next-line react/prop-types const { slides, options } = props; const [emblaRef, emblaApi] = useEmblaCarousel(options, [ AutoScroll({ playOnInit: true }), @@ -149,8 +109,7 @@ const EmblaCarousel: React.FC = (props) => { const { selectedIndex, scrollSnaps, onDotButtonClick } = useDotButton(emblaApi); - - const onButtonAutoplayClick = useCallback( + useCallback( (callback: () => void) => { const autoScroll = emblaApi?.plugins()?.autoScroll; if (!autoScroll) return; @@ -191,7 +150,8 @@ const EmblaCarousel: React.FC = (props) => { - {slides.map((edition, index, currentIndex) => ( + {/* eslint-disable-next-line react/prop-types */} + {slides.map((edition, index) => ( = (props) => { ); }; - export default EmblaCarousel; diff --git a/src/app/components/ThroughTheYears/ThroughTheYears.tsx b/src/app/components/ThroughTheYears/ThroughTheYears.tsx index 9200815..bdec4b2 100644 --- a/src/app/components/ThroughTheYears/ThroughTheYears.tsx +++ b/src/app/components/ThroughTheYears/ThroughTheYears.tsx @@ -1,9 +1,7 @@ import React from "react"; -import styled, { keyframes } from "styled-components"; import { Section } from "@/app/genericComponents/General"; import { SectionTitle } from "@/app/genericComponents/Typography"; -import useEmblaCarousel from "embla-carousel-react"; import EmblaCarousel from "./EmblaCarousel"; // eslint-disable-next-line import/no-extraneous-dependencies import { EmblaOptionsType } from "embla-carousel"; @@ -72,7 +70,6 @@ export default function ThroughTheYears() { }, ]; - const [emblaRef] = useEmblaCarousel(); const OPTIONS: EmblaOptionsType = { align: "start", loop: true, From 4ee02aafcf92acab58676f24585d479e1c9ca011 Mon Sep 17 00:00:00 2001 From: Achraf Hmimou Date: Sat, 30 Mar 2024 14:09:50 +0100 Subject: [PATCH 03/11] fix EsLint now --- src/app/components/ThroughTheYears/EmblaCarousel.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/app/components/ThroughTheYears/EmblaCarousel.tsx b/src/app/components/ThroughTheYears/EmblaCarousel.tsx index e014798..ee2703b 100644 --- a/src/app/components/ThroughTheYears/EmblaCarousel.tsx +++ b/src/app/components/ThroughTheYears/EmblaCarousel.tsx @@ -1,4 +1,3 @@ -// @ts-ignore import { React, useState, useEffect, useCallback } from "react"; // eslint-disable-next-line import/no-extraneous-dependencies import { EmblaOptionsType } from "embla-carousel"; From a2964a3f339b2de1b25962a5c81275e7a1c1abfd Mon Sep 17 00:00:00 2001 From: Achraf Hmimou Date: Sat, 30 Mar 2024 14:12:38 +0100 Subject: [PATCH 04/11] fix EsLint last --- src/app/components/ThroughTheYears/EmblaCarouselDotButton.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/app/components/ThroughTheYears/EmblaCarouselDotButton.tsx b/src/app/components/ThroughTheYears/EmblaCarouselDotButton.tsx index e00b8ba..80d91e0 100644 --- a/src/app/components/ThroughTheYears/EmblaCarouselDotButton.tsx +++ b/src/app/components/ThroughTheYears/EmblaCarouselDotButton.tsx @@ -99,6 +99,7 @@ export const DotButton: React.FC = (props) => { const { children, ...restProps } = props; return ( + // eslint-disable-next-line react/prop-types {children} From b33d3212b32a0b8fad0c4e2933bfad2846fb538c Mon Sep 17 00:00:00 2001 From: Achraf Hmimou Date: Sat, 30 Mar 2024 14:15:08 +0100 Subject: [PATCH 05/11] fix header --- src/app/components/Header.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/components/Header.tsx b/src/app/components/Header.tsx index 432c60c..c29dae2 100644 --- a/src/app/components/Header.tsx +++ b/src/app/components/Header.tsx @@ -54,7 +54,7 @@ export default function Header() { }, []); return ( - + { window.scroll({ From 1965414f23fc82044ade552535162594a6c602bc Mon Sep 17 00:00:00 2001 From: Achraf Hmimou Date: Sat, 30 Mar 2024 15:50:04 +0100 Subject: [PATCH 06/11] typescript errors --- package-lock.json | 1 + package.json | 1 + .../ThroughTheYears/EmblaCarousel.tsx | 113 +++++++++++------- .../EmblaCarouselDotButton.tsx | 28 +++-- 4 files changed, 91 insertions(+), 52 deletions(-) diff --git a/package-lock.json b/package-lock.json index 130e796..e153e36 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14,6 +14,7 @@ "@fortawesome/free-solid-svg-icons": "^6.5.1", "@fortawesome/react-fontawesome": "^0.2.0", "@next/third-parties": "^14.1.0", + "embla-carousel": "^8.0.0", "embla-carousel-auto-scroll": "^8.0.0", "embla-carousel-autoplay": "^8.0.0", "embla-carousel-react": "^8.0.0", diff --git a/package.json b/package.json index 889cc12..a3c8594 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,7 @@ "@fortawesome/free-solid-svg-icons": "^6.5.1", "@fortawesome/react-fontawesome": "^0.2.0", "@next/third-parties": "^14.1.0", + "embla-carousel": "^8.0.0", "embla-carousel-auto-scroll": "^8.0.0", "embla-carousel-autoplay": "^8.0.0", "embla-carousel-react": "^8.0.0", diff --git a/src/app/components/ThroughTheYears/EmblaCarousel.tsx b/src/app/components/ThroughTheYears/EmblaCarousel.tsx index ee2703b..e570e24 100644 --- a/src/app/components/ThroughTheYears/EmblaCarousel.tsx +++ b/src/app/components/ThroughTheYears/EmblaCarousel.tsx @@ -1,19 +1,27 @@ -import { React, useState, useEffect, useCallback } from "react"; -// eslint-disable-next-line import/no-extraneous-dependencies -import { EmblaOptionsType } from "embla-carousel"; -import { DotButton, useDotButton } from "./EmblaCarouselDotButton"; -import useEmblaCarousel from "embla-carousel-react"; -import Image from "next/image"; -import Link from "next/link"; +import React, { useState, useEffect, useCallback, useRef } from "react"; +import { + EmblaCarouselType, + EmblaEventType, + EmblaOptionsType, +} from "embla-carousel"; import AutoScroll from "embla-carousel-auto-scroll"; - import styled from "styled-components"; - import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faPlay, faStop } from "@fortawesome/free-solid-svg-icons"; +import Image from "next/image"; +import Link from "next/link"; +import { DotButton, useDotButton } from "./EmblaCarouselDotButton"; +import useEmblaCarousel from "embla-carousel-react"; + +type Edition = { + url: string; + img: string; + name: string; + date: string; +}; type PropType = { - slides: number[]; + slides: Edition[]; options?: EmblaOptionsType; }; @@ -70,6 +78,7 @@ const EmblaSlide = styled.div` padding-left: var(--slide-spacing-lg); } `; + const EmblaControls = styled.div` display: flex; justify-content: center; @@ -80,6 +89,7 @@ const EmblaControls = styled.div` display: none; } `; + const EmblaDots = styled.div` display: flex; flex-wrap: wrap; @@ -98,58 +108,80 @@ const EmblaPlay = styled.button` margin: 0px 0px 0px 10px; `; -const EmblaCarousel: React.FC = (props) => { - // eslint-disable-next-line react/prop-types - const { slides, options } = props; +const EmblaCarousel: React.FC = ({ slides, options }) => { const [emblaRef, emblaApi] = useEmblaCarousel(options, [ AutoScroll({ playOnInit: true }), ]); - const [isPlaying, setIsPlaying] = useState(false); + const [isPlaying, setIsPlaying] = useState(false); const { selectedIndex, scrollSnaps, onDotButtonClick } = useDotButton(emblaApi); - useCallback( - (callback: () => void) => { - const autoScroll = emblaApi?.plugins()?.autoScroll; - if (!autoScroll) return; - - const resetOrStop = - autoScroll.options.stopOnInteraction === false - ? autoScroll.reset - : autoScroll.stop; - - resetOrStop(); - callback(); - }, - [emblaApi], - ); + + useCallback(() => { + const autoScroll = emblaApi?.plugins()?.autoScroll; + if (!autoScroll) return; + + const options = autoScroll.options as { stopOnInteraction?: boolean }; + const stopOnInteraction = options?.stopOnInteraction ?? false; + + const reset = + typeof autoScroll.reset === "function" ? autoScroll.reset : undefined; + const stop = + typeof autoScroll.stop === "function" ? autoScroll.stop : undefined; + + if (stopOnInteraction && reset) { + reset(); + } else if (stop) { + stop(); + } + }, [emblaApi]); const toggleAutoplay = useCallback(() => { const autoScroll = emblaApi?.plugins()?.autoScroll; if (!autoScroll) return; - const playOrStop = autoScroll.isPlaying() - ? autoScroll.stop - : autoScroll.play; - playOrStop(); + if (typeof autoScroll.isPlaying === "function") { + const playOrStop = autoScroll.isPlaying() + ? (autoScroll.stop as () => void) + : (autoScroll.play as () => void); + playOrStop?.(); + } }, [emblaApi]); + const isMounted = useRef(false); + useEffect(() => { const autoScroll = emblaApi?.plugins()?.autoScroll; if (!autoScroll) return; - setIsPlaying(autoScroll.isPlaying()); - emblaApi - .on("autoScroll:play", () => setIsPlaying(true)) - .on("autoScroll:stop", () => setIsPlaying(false)) - .on("reInit", () => setIsPlaying(false)); + const isAutoScrollPlaying = autoScroll.isPlaying as () => boolean; + setIsPlaying(!!isAutoScrollPlaying()); + + const eventHandlers = { + "autoScroll:play": () => setIsPlaying(true), + "autoScroll:stop": () => setIsPlaying(false), + reInit: () => setIsPlaying(false), + }; + + Object.entries(eventHandlers).forEach(([event, handler]) => { + emblaApi.on(event as EmblaEventType, handler); + }); + + isMounted.current = true; + + return () => { + if (isMounted.current) { + Object.entries(eventHandlers).forEach(([event, handler]) => { + emblaApi.off(event as EmblaEventType, handler); + }); + } + }; }, [emblaApi]); return ( - {/* eslint-disable-next-line react/prop-types */} {slides.map((edition, index) => ( @@ -172,7 +204,7 @@ const EmblaCarousel: React.FC = (props) => { onDotButtonClick(index)} - selected={selectedIndex === index} + selectedIndex={selectedIndex === index} /> ))} @@ -186,4 +218,5 @@ const EmblaCarousel: React.FC = (props) => { ); }; + export default EmblaCarousel; diff --git a/src/app/components/ThroughTheYears/EmblaCarouselDotButton.tsx b/src/app/components/ThroughTheYears/EmblaCarouselDotButton.tsx index 80d91e0..46331cb 100644 --- a/src/app/components/ThroughTheYears/EmblaCarouselDotButton.tsx +++ b/src/app/components/ThroughTheYears/EmblaCarouselDotButton.tsx @@ -57,10 +57,12 @@ type PropType = PropsWithChildren< React.DetailedHTMLProps< React.ButtonHTMLAttributes, HTMLButtonElement - > + > & { + selectedIndex: boolean; + } >; -const EmblaDot = styled.button` +const EmblaDot = styled.button<{ selectedIndex: boolean }>` appearance: none; touch-action: manipulation; display: inline-flex; @@ -76,12 +78,12 @@ const EmblaDot = styled.button` justify-content: center; border-radius: 50%; position: relative; - background-color: ${(props) => - props.selected - ? "orangered" - : "slategray"}; // Change 'blue' to your desired color + background-color: ${(props) => { + return props.selectedIndex ? "orangered" : "slategray"; + }}; + + - &::after { width: 1rem; height: 1rem; @@ -95,12 +97,14 @@ const EmblaDot = styled.button` transform: translate(-50%, -50%); `; -export const DotButton: React.FC = (props) => { - const { children, ...restProps } = props; - +export const DotButton: React.FC = ({ + selectedIndex, + children, + ...restProps +}) => { + // Extract the selectedIndex prop and pass the rest of the props to the styled component return ( - // eslint-disable-next-line react/prop-types - + {children} ); From 55ce8f99ff5e26d88ce75d221437ced98195c7fd Mon Sep 17 00:00:00 2001 From: Achraf Hmimou Date: Sat, 30 Mar 2024 15:52:41 +0100 Subject: [PATCH 07/11] quixfix --- src/app/components/ThroughTheYears/EmblaCarousel.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/app/components/ThroughTheYears/EmblaCarousel.tsx b/src/app/components/ThroughTheYears/EmblaCarousel.tsx index e570e24..f6170bd 100644 --- a/src/app/components/ThroughTheYears/EmblaCarousel.tsx +++ b/src/app/components/ThroughTheYears/EmblaCarousel.tsx @@ -1,6 +1,7 @@ import React, { useState, useEffect, useCallback, useRef } from "react"; +// eslint-disable-next-line import/no-extraneous-dependencies import { - EmblaCarouselType, + // eslint-disable-next-line @typescript-eslint/no-unused-vars EmblaEventType, EmblaOptionsType, } from "embla-carousel"; From 5ce7a6266ca48e20d8efea1e438acc67c2143b8a Mon Sep 17 00:00:00 2001 From: Achraf Hmimou Date: Sat, 30 Mar 2024 17:36:10 +0100 Subject: [PATCH 08/11] links + speed adjusted. td: dots are not entirely clickable --- .../ThroughTheYears/EmblaCarousel.tsx | 2 +- .../EmblaCarouselDotButton.tsx | 36 +++++++++++-------- .../ThroughTheYears/ThroughTheYears.tsx | 35 +++++++++--------- 3 files changed, 40 insertions(+), 33 deletions(-) diff --git a/src/app/components/ThroughTheYears/EmblaCarousel.tsx b/src/app/components/ThroughTheYears/EmblaCarousel.tsx index f6170bd..22b8f6d 100644 --- a/src/app/components/ThroughTheYears/EmblaCarousel.tsx +++ b/src/app/components/ThroughTheYears/EmblaCarousel.tsx @@ -111,7 +111,7 @@ const EmblaPlay = styled.button` const EmblaCarousel: React.FC = ({ slides, options }) => { const [emblaRef, emblaApi] = useEmblaCarousel(options, [ - AutoScroll({ playOnInit: true }), + AutoScroll({ playOnInit: true, speed: 0.5 }), ]); const [isPlaying, setIsPlaying] = useState(false); diff --git a/src/app/components/ThroughTheYears/EmblaCarouselDotButton.tsx b/src/app/components/ThroughTheYears/EmblaCarouselDotButton.tsx index 46331cb..c5dea5a 100644 --- a/src/app/components/ThroughTheYears/EmblaCarouselDotButton.tsx +++ b/src/app/components/ThroughTheYears/EmblaCarouselDotButton.tsx @@ -69,32 +69,38 @@ const EmblaDot = styled.button<{ selectedIndex: boolean }>` text-decoration: none; cursor: url("/rocket-fire.png"), auto; border: 0; - padding: 0; + padding: 0.6rem; margin: 0.1rem; - width: 1rem; - height: 1rem; + width: 1.0rem; + height: 1.0rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; position: relative; + user-select: none; + outline: none; + + background-color: ${(props) => { return props.selectedIndex ? "orangered" : "slategray"; - }}; + }}; + +} - &::after { - width: 1rem; - height: 1rem; - border-radius: 50%; - display: flex; - align-items: center; - content: ""; - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); +&::after { + width: 1rem; + height: 1rem; + border-radius: 50%; + display: flex; + align-items: center; + content: ""; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); `; export const DotButton: React.FC = ({ diff --git a/src/app/components/ThroughTheYears/ThroughTheYears.tsx b/src/app/components/ThroughTheYears/ThroughTheYears.tsx index bdec4b2..2b212ac 100644 --- a/src/app/components/ThroughTheYears/ThroughTheYears.tsx +++ b/src/app/components/ThroughTheYears/ThroughTheYears.tsx @@ -9,38 +9,39 @@ import { EmblaOptionsType } from "embla-carousel"; export default function ThroughTheYears() { const PREVIOUS_EDITIONS = [ { - name: "Fall 2016", - date: "October 23-25", - img: "/Planets/planetPartner.svg", - url: "", + name: "Spring 2016", + date: "Feb 19-21", + img: "/Planets/planetSponsor.svg", + url: "https://s2016.hackupc.com/", }, { - name: "Winter 2016", - date: "May 8-12", - img: "/Planets/planetSponsor.svg", - url: "", + name: "Fall 2016", + date: "Oct 7-9", + img: "/Planets/planetPartner.svg", + url: "https://f2016.hackupc.com/", }, + { name: "Fall 2017", - date: "May 3-5", + date: "Oct 13-15", img: "/Planets/planetMentor.svg", - url: "", + url: "https://f2017.hackupc.com/", }, { name: "Winter 2017", - date: "May 3-5", + date: "March 3-5", img: "/Planets/planetVolunteer.svg", - url: "", + url: "https://w2017.hackupc.com/", }, { name: "2018", - date: "May 3-5", + date: "Oct 19-21", img: "/Planets/planetPartner.svg", url: "https://2018.hackupc.com/", }, { name: "2019", - date: "May 3-5", + date: "Oct 11-13", img: "/Planets/planetSponsor.svg", url: "https://2019.hackupc.com/", }, @@ -52,19 +53,19 @@ export default function ThroughTheYears() { }, { name: "2021", - date: "May 3-5", + date: "May 14-16", img: "/Planets/planetVolunteer.svg", url: "https://2021.hackupc.com/", }, { name: "2022", - date: "May 3-5", + date: "April 21-May 1", img: "/Planets/planetVolunteer.svg", url: "https://2022.hackupc.com/", }, { name: "2023", - date: "May 3-5", + date: "May 12-14", img: "/Planets/planetVolunteer.svg", url: "https://2023.hackupc.com/", }, From a41c6fb55df6c9db45fa49b6eacbef74b5eabd02 Mon Sep 17 00:00:00 2001 From: Achraf Hmimou Date: Thu, 4 Apr 2024 23:21:42 +0200 Subject: [PATCH 09/11] fix dot button autoscroll animation --- .../ThroughTheYears/EmblaCarousel.tsx | 8 ++++++- .../EmblaCarouselDotButton.tsx | 23 +------------------ 2 files changed, 8 insertions(+), 23 deletions(-) diff --git a/src/app/components/ThroughTheYears/EmblaCarousel.tsx b/src/app/components/ThroughTheYears/EmblaCarousel.tsx index 22b8f6d..1744155 100644 --- a/src/app/components/ThroughTheYears/EmblaCarousel.tsx +++ b/src/app/components/ThroughTheYears/EmblaCarousel.tsx @@ -204,7 +204,13 @@ const EmblaCarousel: React.FC = ({ slides, options }) => { {scrollSnaps.map((_, index) => ( onDotButtonClick(index)} + onClick={() => { + onDotButtonClick(index); + const autoScroll = emblaApi?.plugins()?.autoScroll; + if (autoScroll && typeof autoScroll.stop === "function") { + autoScroll.stop(); + } + }} selectedIndex={selectedIndex === index} /> ))} diff --git a/src/app/components/ThroughTheYears/EmblaCarouselDotButton.tsx b/src/app/components/ThroughTheYears/EmblaCarouselDotButton.tsx index c5dea5a..0f6159e 100644 --- a/src/app/components/ThroughTheYears/EmblaCarouselDotButton.tsx +++ b/src/app/components/ThroughTheYears/EmblaCarouselDotButton.tsx @@ -65,14 +65,11 @@ type PropType = PropsWithChildren< const EmblaDot = styled.button<{ selectedIndex: boolean }>` appearance: none; touch-action: manipulation; - display: inline-flex; text-decoration: none; cursor: url("/rocket-fire.png"), auto; border: 0; padding: 0.6rem; margin: 0.1rem; - width: 1.0rem; - height: 1.0rem; display: flex; align-items: center; justify-content: center; @@ -80,27 +77,10 @@ const EmblaDot = styled.button<{ selectedIndex: boolean }>` position: relative; user-select: none; outline: none; - - + background-color: ${(props) => { return props.selectedIndex ? "orangered" : "slategray"; }}; - - -} - - -&::after { - width: 1rem; - height: 1rem; - border-radius: 50%; - display: flex; - align-items: center; - content: ""; - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); `; export const DotButton: React.FC = ({ @@ -108,7 +88,6 @@ export const DotButton: React.FC = ({ children, ...restProps }) => { - // Extract the selectedIndex prop and pass the rest of the props to the styled component return ( {children} From 7c8c9d751cb11f9e378bd1f400fd8b153b084b5b Mon Sep 17 00:00:00 2001 From: Achraf Hmimou Date: Sat, 6 Apr 2024 15:01:00 +0200 Subject: [PATCH 10/11] planetes (graphic design is my passion) --- public/Planets/ThroughTheYears/2018.svg | 86 +++++++++++++++++++ public/Planets/ThroughTheYears/2019.svg | 57 ++++++++++++ public/Planets/ThroughTheYears/2020.svg | 43 ++++++++++ public/Planets/ThroughTheYears/2021.svg | 19 ++++ public/Planets/ThroughTheYears/2022.svg | 33 +++++++ public/Planets/ThroughTheYears/2023.svg | 34 ++++++++ public/Planets/ThroughTheYears/Fall2016.svg | 41 +++++++++ public/Planets/ThroughTheYears/Fall2017.svg | 17 ++++ public/Planets/ThroughTheYears/Spring2016.svg | 41 +++++++++ public/Planets/ThroughTheYears/Winter2017.svg | 28 ++++++ .../ThroughTheYears/ThroughTheYears.tsx | 20 ++--- 11 files changed, 409 insertions(+), 10 deletions(-) create mode 100644 public/Planets/ThroughTheYears/2018.svg create mode 100644 public/Planets/ThroughTheYears/2019.svg create mode 100644 public/Planets/ThroughTheYears/2020.svg create mode 100644 public/Planets/ThroughTheYears/2021.svg create mode 100644 public/Planets/ThroughTheYears/2022.svg create mode 100644 public/Planets/ThroughTheYears/2023.svg create mode 100644 public/Planets/ThroughTheYears/Fall2016.svg create mode 100644 public/Planets/ThroughTheYears/Fall2017.svg create mode 100644 public/Planets/ThroughTheYears/Spring2016.svg create mode 100644 public/Planets/ThroughTheYears/Winter2017.svg diff --git a/public/Planets/ThroughTheYears/2018.svg b/public/Planets/ThroughTheYears/2018.svg new file mode 100644 index 0000000..248458d --- /dev/null +++ b/public/Planets/ThroughTheYears/2018.svg @@ -0,0 +1,86 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/Planets/ThroughTheYears/2019.svg b/public/Planets/ThroughTheYears/2019.svg new file mode 100644 index 0000000..dd82edd --- /dev/null +++ b/public/Planets/ThroughTheYears/2019.svg @@ -0,0 +1,57 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/Planets/ThroughTheYears/2020.svg b/public/Planets/ThroughTheYears/2020.svg new file mode 100644 index 0000000..ddc1676 --- /dev/null +++ b/public/Planets/ThroughTheYears/2020.svg @@ -0,0 +1,43 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/Planets/ThroughTheYears/2021.svg b/public/Planets/ThroughTheYears/2021.svg new file mode 100644 index 0000000..e1c86b7 --- /dev/null +++ b/public/Planets/ThroughTheYears/2021.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + + diff --git a/public/Planets/ThroughTheYears/2022.svg b/public/Planets/ThroughTheYears/2022.svg new file mode 100644 index 0000000..14ee8e9 --- /dev/null +++ b/public/Planets/ThroughTheYears/2022.svg @@ -0,0 +1,33 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/Planets/ThroughTheYears/2023.svg b/public/Planets/ThroughTheYears/2023.svg new file mode 100644 index 0000000..421c1dc --- /dev/null +++ b/public/Planets/ThroughTheYears/2023.svg @@ -0,0 +1,34 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/Planets/ThroughTheYears/Fall2016.svg b/public/Planets/ThroughTheYears/Fall2016.svg new file mode 100644 index 0000000..d8b11f1 --- /dev/null +++ b/public/Planets/ThroughTheYears/Fall2016.svg @@ -0,0 +1,41 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/Planets/ThroughTheYears/Fall2017.svg b/public/Planets/ThroughTheYears/Fall2017.svg new file mode 100644 index 0000000..4ee9f26 --- /dev/null +++ b/public/Planets/ThroughTheYears/Fall2017.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/public/Planets/ThroughTheYears/Spring2016.svg b/public/Planets/ThroughTheYears/Spring2016.svg new file mode 100644 index 0000000..a568640 --- /dev/null +++ b/public/Planets/ThroughTheYears/Spring2016.svg @@ -0,0 +1,41 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/Planets/ThroughTheYears/Winter2017.svg b/public/Planets/ThroughTheYears/Winter2017.svg new file mode 100644 index 0000000..3ab07a8 --- /dev/null +++ b/public/Planets/ThroughTheYears/Winter2017.svg @@ -0,0 +1,28 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/app/components/ThroughTheYears/ThroughTheYears.tsx b/src/app/components/ThroughTheYears/ThroughTheYears.tsx index 2b212ac..379492c 100644 --- a/src/app/components/ThroughTheYears/ThroughTheYears.tsx +++ b/src/app/components/ThroughTheYears/ThroughTheYears.tsx @@ -11,62 +11,62 @@ export default function ThroughTheYears() { { name: "Spring 2016", date: "Feb 19-21", - img: "/Planets/planetSponsor.svg", + img: "/Planets/ThroughTheYears/Spring2016.svg", url: "https://s2016.hackupc.com/", }, { name: "Fall 2016", date: "Oct 7-9", - img: "/Planets/planetPartner.svg", + img: "/Planets/ThroughTheYears/Fall2016.svg", url: "https://f2016.hackupc.com/", }, { name: "Fall 2017", date: "Oct 13-15", - img: "/Planets/planetMentor.svg", + img: "/Planets/ThroughTheYears/Fall2017.svg", url: "https://f2017.hackupc.com/", }, { name: "Winter 2017", date: "March 3-5", - img: "/Planets/planetVolunteer.svg", + img: "/Planets/ThroughTheYears/Winter2017.svg", url: "https://w2017.hackupc.com/", }, { name: "2018", date: "Oct 19-21", - img: "/Planets/planetPartner.svg", + img: "/Planets/ThroughTheYears/2018.svg", url: "https://2018.hackupc.com/", }, { name: "2019", date: "Oct 11-13", - img: "/Planets/planetSponsor.svg", + img: "/Planets/ThroughTheYears/2019.svg", url: "https://2019.hackupc.com/", }, { name: "2020", date: "CANCELLED", - img: "/Planets/planetMentor.svg", + img: "/Planets/ThroughTheYears/2020.svg", url: "", }, { name: "2021", date: "May 14-16", - img: "/Planets/planetVolunteer.svg", + img: "/Planets/ThroughTheYears/2021.svg", url: "https://2021.hackupc.com/", }, { name: "2022", date: "April 21-May 1", - img: "/Planets/planetVolunteer.svg", + img: "/Planets/ThroughTheYears/2022.svg", url: "https://2022.hackupc.com/", }, { name: "2023", date: "May 12-14", - img: "/Planets/planetVolunteer.svg", + img: "/Planets/ThroughTheYears/2023.svg", url: "https://2023.hackupc.com/", }, ]; From ce9002de21d46bb400373d61659bd5ed030ec16f Mon Sep 17 00:00:00 2001 From: Achraf Hmimou Date: Sat, 6 Apr 2024 16:57:20 +0200 Subject: [PATCH 11/11] cancelled not clickable --- public/Planets/ThroughTheYears/2023.svg | 34 +++++++++---------- .../ThroughTheYears/EmblaCarousel.tsx | 33 ++++++++++++------ 2 files changed, 40 insertions(+), 27 deletions(-) diff --git a/public/Planets/ThroughTheYears/2023.svg b/public/Planets/ThroughTheYears/2023.svg index 421c1dc..0600d44 100644 --- a/public/Planets/ThroughTheYears/2023.svg +++ b/public/Planets/ThroughTheYears/2023.svg @@ -1,33 +1,33 @@ - - + + - - - - - - - - - - - + + + + + + + + + + + - + - + - + - + diff --git a/src/app/components/ThroughTheYears/EmblaCarousel.tsx b/src/app/components/ThroughTheYears/EmblaCarousel.tsx index 1744155..65d1ff4 100644 --- a/src/app/components/ThroughTheYears/EmblaCarousel.tsx +++ b/src/app/components/ThroughTheYears/EmblaCarousel.tsx @@ -185,16 +185,29 @@ const EmblaCarousel: React.FC = ({ slides, options }) => { {slides.map((edition, index) => ( - - -

{edition.name}

-

{edition.date}

- + {edition.url ? ( + + altText +

{edition.name}

+

{edition.date}

+ + ) : ( +
+ altText +

{edition.name}

+

{edition.date}

+
+ )} ))}