From e76ef39caaa9d0af706ab9e81ae68c40ad34e198 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Timoth=C3=A9e=20AUBRY?= Date: Mon, 3 Feb 2025 19:01:52 +0100 Subject: [PATCH 1/7] Add Program TopBanner --- src/app/page.tsx | 16 +++++++----- src/components/Program/Program.tsx | 21 ++++++++++++++++ src/components/Program/ProgramList.tsx | 35 ++++++++++++++++++++++++++ src/components/TopBanner/TopBanner.tsx | 4 +-- 4 files changed, 68 insertions(+), 8 deletions(-) create mode 100644 src/components/Program/Program.tsx create mode 100644 src/components/Program/ProgramList.tsx diff --git a/src/app/page.tsx b/src/app/page.tsx index 8fe55b6..6774851 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,4 +1,4 @@ -'use client'; +"use client"; import ContentMedia from "@/components/ContentMedia/ContentMedia"; import Place from "@/components/Place/Place"; @@ -7,6 +7,7 @@ import SponsorList from "@/components/SponsorList/SponsorList"; import Container from "@/layouts/Container"; import Hero from "@/components/Hero/Hero"; import Speakers from "@/components/Speakers/Speakers"; +import Program from "@/components/Program/Program"; import useDataProvider from "@/hooks/useDataProvider"; import { SpeakersProps } from "@/components/Speakers/SpeakersProps"; import { SponsorProps } from "@/components/SponsorList/Sponsor/Sponsor.types"; @@ -16,7 +17,7 @@ import Link from "next/link"; import { useTranslation } from "react-i18next"; export default function Home() { - const { t } = useTranslation(['common']); + const { t } = useTranslation(["common"]); const dataProvider = useDataProvider(); const speakers: SpeakersProps = dataProvider.useSpeakers(); const sponsors: SponsorProps[] = dataProvider.useSponsors(); @@ -25,6 +26,9 @@ export default function Home() { return (
+
+ +
@@ -49,12 +53,12 @@ export default function Home() { className="mt-6" > Pour toute autre question, consultez notre{" "} - - {t('common:faqLabel')} + + {t("common:faqLabel")} {" "} ou écrivez-nous via le{" "} - - {t('common:contactLabel')} + + {t("common:contactLabel")} . diff --git a/src/components/Program/Program.tsx b/src/components/Program/Program.tsx new file mode 100644 index 0000000..f9d6d55 --- /dev/null +++ b/src/components/Program/Program.tsx @@ -0,0 +1,21 @@ +import React from "react"; +import Container from "@/layouts/Container"; +import BackgroundImage from "../BackgroundImage/BackgroundImage"; +import ProgramList from "./ProgramList"; + +const Program = () => { + return ( + + +
+ +
+ + + ); +}; + +export default Program; diff --git a/src/components/Program/ProgramList.tsx b/src/components/Program/ProgramList.tsx new file mode 100644 index 0000000..09f21b2 --- /dev/null +++ b/src/components/Program/ProgramList.tsx @@ -0,0 +1,35 @@ +import React from "react"; +import TopBanner from "../TopBanner/TopBanner"; +import ButtonLink from "../ButtonLink/ButtonLink"; +import { SwiperClass } from "swiper/react"; + +const ProgramList = () => { + const swiperRef = React.useRef(null); + + const handlePrev = () => { + if (swiperRef.current) { + swiperRef.current.slidePrev(); + } + }; + + const handleNext = () => { + if (swiperRef.current) { + swiperRef.current.slideNext(); + } + }; + return ( +
+ + + Découvrir le programme + + +
+ ); +}; + +export default ProgramList; diff --git a/src/components/TopBanner/TopBanner.tsx b/src/components/TopBanner/TopBanner.tsx index 2d86124..01990ce 100644 --- a/src/components/TopBanner/TopBanner.tsx +++ b/src/components/TopBanner/TopBanner.tsx @@ -48,11 +48,11 @@ const TopBanner = ({ ); return ( -
+
{backgroundImage ? ( {bannerContent} From f707cf23f19d3f1dc4c751bec2f2df90b9abe765 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Timoth=C3=A9e=20AUBRY?= Date: Mon, 3 Feb 2025 19:08:45 +0100 Subject: [PATCH 2/7] Add Program TopBanner mobile --- src/components/Program/ProgramList.tsx | 15 ++++++++++++--- 1 file changed, 12 insertions(+), 3 deletions(-) diff --git a/src/components/Program/ProgramList.tsx b/src/components/Program/ProgramList.tsx index 09f21b2..9e53e68 100644 --- a/src/components/Program/ProgramList.tsx +++ b/src/components/Program/ProgramList.tsx @@ -24,9 +24,18 @@ const ProgramList = () => { onNextClick={handleNext} onPrevClick={handlePrev} > - - Découvrir le programme - + <> +
+ + Voir tout + +
+
+ + Découvrir le Programme + +
+ ); From e8f9ec97b578a9bf5aaea72f5c66ae94e847891a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Timoth=C3=A9e=20AUBRY?= Date: Mon, 3 Feb 2025 19:41:19 +0100 Subject: [PATCH 3/7] Update Person component with appearance --- src/components/Person/Person.tsx | 91 ++++++++++++++++++++------------ 1 file changed, 57 insertions(+), 34 deletions(-) diff --git a/src/components/Person/Person.tsx b/src/components/Person/Person.tsx index baf44f9..b010e0d 100644 --- a/src/components/Person/Person.tsx +++ b/src/components/Person/Person.tsx @@ -5,64 +5,87 @@ import { GrFormView } from "react-icons/gr"; import { PersonProps } from "@/components/Person/PersonProps"; import classNames from "classnames"; -const PersonCard = ({ person }: { person: PersonProps }) => ( +const PersonCard = ({ + person, + appearance = "speaker", +}: { + person: PersonProps; + appearance?: "speaker" | "program"; +}) => (
-
- {person.company} - {person.company} -
-

{person.name}

+ {appearance === "speaker" && ( +
+ {person.company} + {person.company} +
+ )} +

{person.name}

{person.role}

); -const Person = ({ person }: { person: PersonProps }) => { +const Person = ({ + person, + appearance = "speaker", +}: { + person: PersonProps; + appearance?: "speaker" | "program"; +}) => { const { width } = useWindowSize(); const bgClass = `bg-cover bg-photo-${person.photoBg}`; + const imageClass = classNames( + "relative aspect-square object-cover overflow-hidden", + { + "w-20 h-24": appearance === "program", + "min-w-[135px]": appearance === "speaker" && width < 768, + "min-w-[165px]": appearance === "speaker" && width >= 768, + "rounded-full": appearance === "speaker", + "[clip-path:polygon(50%_0%,100%_25%,100%_75%,50%_100%,0%_75%,0%_25%)]": + appearance === "program", + }, + bgClass + ); + return ( <> {width < 768 ? ( -
+
{person.name} - +
) : ( <> -
+
{person.name} -
-
- - Biographie + {appearance === "speaker" && ( +
+
+ + Biographie +
-
+ )}
- + )} From 354501712ee6901f239f705acc4f6df84eeaf280 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Timoth=C3=A9e=20AUBRY?= Date: Mon, 3 Feb 2025 20:26:43 +0100 Subject: [PATCH 4/7] Add Program slider without content --- public/locales/fr/speakers.json | 4 + src/components/Program/ProgramList.tsx | 35 ++++++++- .../Speakers/Session/SessionProps.ts | 1 + .../Speakers/Speaker/PersonPopIn.tsx | 6 +- src/hooks/useDataProvider.tsx | 75 +++++++++---------- 5 files changed, 77 insertions(+), 44 deletions(-) diff --git a/public/locales/fr/speakers.json b/public/locales/fr/speakers.json index 85549ff..9cc0e82 100644 --- a/public/locales/fr/speakers.json +++ b/public/locales/fr/speakers.json @@ -68,6 +68,7 @@ }, "sessions": [ { + "id": 1, "title": "Comment PSh est devenu le partenaire de Adobe.", "description": "Une plongée inspirante dans les coulisses d'un partenariat gagnant-gagnant, avec des enseignements applicables à d'autres collaborations stratégiques.", "lang": "fr", @@ -79,6 +80,7 @@ "speakers": [1] }, { + "id": 2, "title": "200 Domains on a Single Magento Instance with a $300 Hosting Bill", "description": "A fascinating story about a unique customer business model with a Magento store where each product segment has its dedicated domain and technology behind it.", "lang": "en", @@ -90,6 +92,7 @@ "speakers": [2] }, { + "id": 3, "title": "Comment étendre Magento/Adobe Commerce sans le surcharger - App Builder.", "description": "Et si vous personnalisiez Magento sans jamais toucher à son code ? Découvrez une approche innovante basée sur les addons, en exploitant Adobe App Builder et Runtime I/O pour transformer l’expérience Magento.", "lang": "fr", @@ -101,6 +104,7 @@ "speakers": [3] }, { + "id": 4, "title": "Le frontend Magento : vers une nouvelle dynamique communautaire.", "description": "Réinventer le frontend Magento en l'alignant sur les meilleures pratiques modernes : une opportunité d’optimiser la stack, d’attirer de nouveaux talents et de dynamiser la communauté grâce à une collaboration renforcée entre backend et frontend.", "lang": "fr", diff --git a/src/components/Program/ProgramList.tsx b/src/components/Program/ProgramList.tsx index 9e53e68..e539a5d 100644 --- a/src/components/Program/ProgramList.tsx +++ b/src/components/Program/ProgramList.tsx @@ -1,10 +1,16 @@ import React from "react"; import TopBanner from "../TopBanner/TopBanner"; import ButtonLink from "../ButtonLink/ButtonLink"; -import { SwiperClass } from "swiper/react"; +import { Swiper, SwiperClass, SwiperSlide } from "swiper/react"; +import { Navigation } from "swiper/modules"; +import "swiper/css"; +import "swiper/css/navigation"; +import useDataProvider from "@/hooks/useDataProvider"; +import ClientOnly from "@/helpers/ClientOnly"; const ProgramList = () => { const swiperRef = React.useRef(null); + const sessions = useDataProvider().useSessions(); const handlePrev = () => { if (swiperRef.current) { @@ -18,7 +24,7 @@ const ProgramList = () => { } }; return ( -
+
{
+ + { + swiperRef.current = swiper; + }} + modules={[Navigation]} + spaceBetween={30} + breakpoints={{ + 0: { + slidesPerView: 1.2, + spaceBetween: 16, + }, + 768: { + slidesPerView: 3, + }, + }} + className="relative" + > + {sessions.map((session) => ( + +
{session.title}
+ + ))} + + ); }; diff --git a/src/components/Speakers/Session/SessionProps.ts b/src/components/Speakers/Session/SessionProps.ts index 03fa028..c158b59 100644 --- a/src/components/Speakers/Session/SessionProps.ts +++ b/src/components/Speakers/Session/SessionProps.ts @@ -1,4 +1,5 @@ export type SessionProps = { + id: number; title: string; description: string; lang: string; diff --git a/src/components/Speakers/Speaker/PersonPopIn.tsx b/src/components/Speakers/Speaker/PersonPopIn.tsx index 93bd97c..cf60568 100644 --- a/src/components/Speakers/Speaker/PersonPopIn.tsx +++ b/src/components/Speakers/Speaker/PersonPopIn.tsx @@ -1,4 +1,4 @@ -'use client'; +"use client"; import { PersonProps } from "@/components/Person/PersonProps"; import PersonPopIn from "@/components/Person/PersonPopIn"; @@ -14,7 +14,7 @@ interface SpeakerPopInProps { const SpeakerPopIn = ({ isOpen, onClose, - selectedSpeaker + selectedSpeaker, }: SpeakerPopInProps) => { const dataProvider = useDataProvider(); const sessions = dataProvider.useSessions(selectedSpeaker.id); @@ -27,7 +27,7 @@ const SpeakerPopIn = ({ > {sessions.map((session, index) => ( - ))}; + ))} ); }; diff --git a/src/hooks/useDataProvider.tsx b/src/hooks/useDataProvider.tsx index 02ae176..566bea6 100644 --- a/src/hooks/useDataProvider.tsx +++ b/src/hooks/useDataProvider.tsx @@ -1,85 +1,82 @@ -'use client'; +"use client"; import { useTranslation } from "react-i18next"; import { SpeakersProps } from "@/components/Speakers/SpeakersProps"; import { SponsorProps } from "@/components/SponsorList/Sponsor/Sponsor.types"; import { PlaceProps } from "@/components/Place/PlaceProps"; import { PersonProps } from "@/components/Person/PersonProps"; -import {SessionProps} from "@/components/Speakers/Session/SessionProps"; +import { SessionProps } from "@/components/Speakers/Session/SessionProps"; -const useData = (ns: string, key: string = 'data') => { +const useData = (ns: string, key: string = "data") => { return useTranslation([ns]).t(key, { returnObjects: true }); -} +}; const isSpeakersProps = (content: object): content is SpeakersProps => { - return content !== null && typeof content === 'object'; -} + return content !== null && typeof content === "object"; +}; const isSessionProps = (content: object): content is SessionProps[] => { - return content !== null && typeof content === 'object'; -} + return content !== null && typeof content === "object"; +}; const isSponsors = (content: object): content is SponsorProps[] => { - return content !== null && typeof content === 'object'; -} + return content !== null && typeof content === "object"; +}; const isPlaceProps = (content: object): content is PlaceProps => { - return content !== null && typeof content === 'object'; -} + return content !== null && typeof content === "object"; +}; const isPersonList = (content: object): content is PersonProps[] => { - return content !== null && typeof content === 'object'; -} + return content !== null && typeof content === "object"; +}; -const useSpeakers = (): SpeakersProps => -{ - const content = useData('speakers'); +const useSpeakers = (): SpeakersProps => { + const content = useData("speakers"); if (!isSpeakersProps(content)) { - throw new Error('Content is not a valid Speakers Type'); + throw new Error("Content is not a valid Speakers Type"); } return content; -} +}; -const useSessions = (speakerId: number): SessionProps[] => -{ - const content = useData('speakers', 'data.sessions'); +const useSessions = (speakerId?: number): SessionProps[] => { + const content = useData("speakers", "data.sessions"); if (!isSessionProps(content)) { - throw new Error('Content is not a valid Speakers Type'); + throw new Error("Content is not a valid Speakers Type"); } + if (!speakerId) return content; + return content.filter((session) => session.speakers.includes(speakerId)); -} +}; -const useSponsors = (): SponsorProps[] => -{ - const content = useData('sponsors', 'partners'); +const useSponsors = (): SponsorProps[] => { + const content = useData("sponsors", "partners"); if (!isSponsors(content)) { - throw new Error('Content is not a valid array of Sponsor Type'); + throw new Error("Content is not a valid array of Sponsor Type"); } return content; -} +}; -const usePlace = (): PlaceProps => -{ - const content = useData('place'); +const usePlace = (): PlaceProps => { + const content = useData("place"); if (!isPlaceProps(content)) { - throw new Error('Content is not a valid Place Type'); + throw new Error("Content is not a valid Place Type"); } return content; -} +}; -const usePersonList = (ns: string, key: string): PersonProps[] => -{ +const usePersonList = (ns: string, key: string): PersonProps[] => { const content = useData(ns, key); if (!isPersonList(content)) { - throw new Error('Content is not a valid array of Sponsor Type'); + throw new Error("Content is not a valid array of Sponsor Type"); } return content; -} +}; const useDataProvider = () => { return { @@ -88,7 +85,7 @@ const useDataProvider = () => { useSessions: useSessions, usePlace: usePlace, usePersonList: usePersonList, - } + }; }; export default useDataProvider; From 328005f1a2363915275e71a66962e4cfcfc82880 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Timoth=C3=A9e=20AUBRY?= Date: Mon, 3 Feb 2025 20:29:47 +0100 Subject: [PATCH 5/7] Fix Program slider --- src/components/Program/ProgramList.tsx | 40 ++++++++++++++------------ 1 file changed, 21 insertions(+), 19 deletions(-) diff --git a/src/components/Program/ProgramList.tsx b/src/components/Program/ProgramList.tsx index e539a5d..bbfa6ec 100644 --- a/src/components/Program/ProgramList.tsx +++ b/src/components/Program/ProgramList.tsx @@ -24,25 +24,27 @@ const ProgramList = () => { } }; return ( -
- - <> -
- - Voir tout - -
-
- - Découvrir le Programme - -
- - +
+
+ + <> +
+ + Voir tout + +
+
+ + Découvrir le Programme + +
+ + +
{ From 2f51abdc11ca0bb1e700d6ee97ec5707dbc6e536 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Timoth=C3=A9e=20AUBRY?= Date: Mon, 3 Feb 2025 23:04:34 +0100 Subject: [PATCH 6/7] Add Program slider content --- src/components/Person/Person.tsx | 6 ++-- src/components/Program/ProgramList.tsx | 7 ++-- src/components/Program/ProgramTile.tsx | 36 +++++++++++++++++++ src/components/Speakers/Session/Session.tsx | 27 ++++++-------- .../Speakers/Speaker/PersonPopIn.tsx | 4 ++- 5 files changed, 56 insertions(+), 24 deletions(-) create mode 100644 src/components/Program/ProgramTile.tsx diff --git a/src/components/Person/Person.tsx b/src/components/Person/Person.tsx index b010e0d..7ff4c69 100644 --- a/src/components/Person/Person.tsx +++ b/src/components/Person/Person.tsx @@ -12,7 +12,7 @@ const PersonCard = ({ person: PersonProps; appearance?: "speaker" | "program"; }) => ( -
+
{appearance === "speaker" && (
) : ( - <> +
- +
)} ); diff --git a/src/components/Program/ProgramList.tsx b/src/components/Program/ProgramList.tsx index bbfa6ec..d290c36 100644 --- a/src/components/Program/ProgramList.tsx +++ b/src/components/Program/ProgramList.tsx @@ -7,6 +7,7 @@ import "swiper/css"; import "swiper/css/navigation"; import useDataProvider from "@/hooks/useDataProvider"; import ClientOnly from "@/helpers/ClientOnly"; +import ProgramTile from "./ProgramTile"; const ProgramList = () => { const swiperRef = React.useRef(null); @@ -54,7 +55,7 @@ const ProgramList = () => { spaceBetween={30} breakpoints={{ 0: { - slidesPerView: 1.2, + slidesPerView: 1, spaceBetween: 16, }, 768: { @@ -64,8 +65,8 @@ const ProgramList = () => { className="relative" > {sessions.map((session) => ( - -
{session.title}
+ + ))} diff --git a/src/components/Program/ProgramTile.tsx b/src/components/Program/ProgramTile.tsx new file mode 100644 index 0000000..6f624c3 --- /dev/null +++ b/src/components/Program/ProgramTile.tsx @@ -0,0 +1,36 @@ +import React from "react"; +import { SessionProps } from "../Speakers/Session/SessionProps"; +import Session from "../Speakers/Session/Session"; +import { PiCalendarPlus } from "react-icons/pi"; +import Person from "../Person/Person"; +import useDataProvider from "@/hooks/useDataProvider"; + +const ProgramTile = ({ session }: { session: SessionProps }) => { + const dataProvider = useDataProvider(); + const speakers = dataProvider + .usePersonList("speakers", "data.speakers") + .filter((speaker) => session.speakers.includes(speaker.id)); + + return ( +
+
+ +
+ {speakers.map((speaker) => ( + + ))} +
+
+
+
+ + + Ajouter à mon agenda + +
+
+
+ ); +}; + +export default ProgramTile; diff --git a/src/components/Speakers/Session/Session.tsx b/src/components/Speakers/Session/Session.tsx index 3cd4e05..c78dff5 100644 --- a/src/components/Speakers/Session/Session.tsx +++ b/src/components/Speakers/Session/Session.tsx @@ -1,4 +1,4 @@ -'use client'; +"use client"; import React from "react"; import Typography from "@/components/Typography/Typography"; @@ -9,10 +9,10 @@ import ButtonLink from "@/components/ButtonLink/ButtonLink"; import { useTranslation } from "react-i18next"; const Session = ({ session }: { session: SessionProps }) => { - const { t } = useTranslation(['speakers']); + const { t } = useTranslation(["speakers"]); return ( -
+
@@ -35,10 +35,7 @@ const Session = ({ session }: { session: SessionProps }) => {
{session.tags.map((tag, tagIndex) => ( - + { ))}
-
- {!!session.eventUrl && ( + {!!session.eventUrl && ( +
} + icon={} > - + Ajouter à mon agenda - )} -
+
+ )}
); }; diff --git a/src/components/Speakers/Speaker/PersonPopIn.tsx b/src/components/Speakers/Speaker/PersonPopIn.tsx index cf60568..99fea35 100644 --- a/src/components/Speakers/Speaker/PersonPopIn.tsx +++ b/src/components/Speakers/Speaker/PersonPopIn.tsx @@ -26,7 +26,9 @@ const SpeakerPopIn = ({ selectedPerson={selectedSpeaker} > {sessions.map((session, index) => ( - +
+ +
))} ); From 896451bd36da8292ce7d05d3059d5dd3bd3e3002 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Timoth=C3=A9e=20AUBRY?= Date: Mon, 3 Feb 2025 23:22:58 +0100 Subject: [PATCH 7/7] Update slider responsive --- src/components/Person/Person.tsx | 10 +++++----- src/components/Program/ProgramList.tsx | 3 +++ src/components/Program/ProgramTile.tsx | 2 +- src/components/Speakers/SpeakersList.tsx | 10 +++++----- src/components/TopBanner/TopBanner.tsx | 2 +- 5 files changed, 15 insertions(+), 12 deletions(-) diff --git a/src/components/Person/Person.tsx b/src/components/Person/Person.tsx index 7ff4c69..3730f5e 100644 --- a/src/components/Person/Person.tsx +++ b/src/components/Person/Person.tsx @@ -60,8 +60,8 @@ const Person = ({ {person.name} @@ -72,12 +72,12 @@ const Person = ({ {person.name} {appearance === "speaker" && ( -
+
Biographie diff --git a/src/components/Program/ProgramList.tsx b/src/components/Program/ProgramList.tsx index d290c36..2f5921f 100644 --- a/src/components/Program/ProgramList.tsx +++ b/src/components/Program/ProgramList.tsx @@ -59,6 +59,9 @@ const ProgramList = () => { spaceBetween: 16, }, 768: { + slidesPerView: 2, + }, + 1024: { slidesPerView: 3, }, }} diff --git a/src/components/Program/ProgramTile.tsx b/src/components/Program/ProgramTile.tsx index 6f624c3..9190a38 100644 --- a/src/components/Program/ProgramTile.tsx +++ b/src/components/Program/ProgramTile.tsx @@ -22,7 +22,7 @@ const ProgramTile = ({ session }: { session: SessionProps }) => {
-
+
Ajouter à mon agenda diff --git a/src/components/Speakers/SpeakersList.tsx b/src/components/Speakers/SpeakersList.tsx index facf1ad..223d3b2 100644 --- a/src/components/Speakers/SpeakersList.tsx +++ b/src/components/Speakers/SpeakersList.tsx @@ -1,4 +1,4 @@ -'use client'; +"use client"; import React from "react"; import { Swiper, SwiperClass, SwiperSlide } from "swiper/react"; @@ -19,8 +19,8 @@ const SpeakersList = ({ speakers }: { speakers: PersonProps[] }) => { const swiperRef = React.useRef(null); const [selectedSpeaker, setSelectedSpeaker] = React.useState(null); - const { t } = useTranslation(['speakers']); - const actions = t('actions', { returnObjects: true }); + const { t } = useTranslation(["speakers"]); + const actions = t("actions", { returnObjects: true }); const handleSpeakerClick = (speaker: PersonProps) => { setSelectedSpeaker(speaker); @@ -51,7 +51,7 @@ const SpeakersList = ({ speakers }: { speakers: PersonProps[] }) => { onPrevClick={handlePrev} onNextClick={handleNext} > - {'seeAllUrl' in actions && typeof actions.seeAllUrl === 'string' && ( + {"seeAllUrl" in actions && typeof actions.seeAllUrl === "string" && ( <>
@@ -76,7 +76,7 @@ const SpeakersList = ({ speakers }: { speakers: PersonProps[] }) => { spaceBetween={30} breakpoints={{ 0: { - slidesPerView: 1.2, + slidesPerView: 1.1, spaceBetween: 16, }, 768: { diff --git a/src/components/TopBanner/TopBanner.tsx b/src/components/TopBanner/TopBanner.tsx index 01990ce..2217f88 100644 --- a/src/components/TopBanner/TopBanner.tsx +++ b/src/components/TopBanner/TopBanner.tsx @@ -29,7 +29,7 @@ const TopBanner = ({
{children} - {onPrevClick && onNextClick && width > 768 && ( + {onPrevClick && onNextClick && width > 1024 && (