Merge pull request #27 from opengento/program

Program
opengento · Feb 4, 2025 · a71487d · a71487d
2 parents 432f57f + fd17a89
commit a71487d
Show file tree

Hide file tree

Showing 7 changed files with 155 additions and 46 deletions.
diff --git a/src/components/Faq/Faq.tsx b/src/components/Faq/Faq.tsx
@@ -1,5 +1,5 @@
-'use client';
-import React, {ReactNode, useState} from "react";
+"use client";
+import React, { ReactNode, useState } from "react";
 import {
   FaBus,
   FaCompass,
@@ -9,17 +9,17 @@ import {
   FaStar,
   FaTicketAlt,
   FaUser,
-  FaTshirt
-} from "react-icons/fa"
+  FaTshirt,
+} from "react-icons/fa";
 import Typography from "@/components/Typography/Typography";
 import { IoIosArrowDown } from "react-icons/io";
 
 const Faq = ({
-  display = 'list',
-  limit
+  display = "list",
+  limit,
 }: {
-  display: 'list' | 'grid',
-  limit?: number,
+  display: "list" | "grid";
+  limit?: number;
 }) => {
   const [openIndex, setOpenIndex] = useState<number | null>(null);
 
@@ -30,53 +30,65 @@ const Faq = ({
   }[] = [
     {
       question: "Quelle est la date et le lieu de Meet Magento France 2025 ?",
-      icon: <FaCompass color="#FF7DD1" size={16}/>,
-      answer: "Meet Magento France 2025 se déroulera le 25 mars 2025, à L’Étoile Business Center à Paris.",
+      icon: <FaCompass className="text-pink" size={16} />,
+      answer:
+        "Meet Magento France 2025 se déroulera le 25 mars 2025, à L’Étoile Business Center à Paris.",
     },
     {
-      question: "Quels types de conférences seront proposés lors de l'événement ?",
-      icon: <FaUser color="#FF7DD1" size={16}/>,
-      answer: "Des conférences business et techniques animées par des experts du digital, e-ommerçants, éditeurs et agences sont attendues au programme de Meet Magento France 2025 ! Découvrez dès à présent l’agenda des conférences et la liste des intervenants.",
+      question:
+        "Quels types de conférences seront proposés lors de l'événement ?",
+      icon: <FaUser className="text-pink" size={16} />,
+      answer:
+        "Des conférences business et techniques animées par des experts du digital, e-ommerçants, éditeurs et agences sont attendues au programme de Meet Magento France 2025 ! Découvrez dès à présent l’agenda des conférences et la liste des intervenants.",
     },
     {
       question: "Qui peut participer à Meet Magento France 2025 ?",
-      icon: <FaHeart color="#FF7DD1" size={16}/>,
-      answer: "Meet Magento France 2025 accueillera les acteurs de l’écosystème Magento et Adobe Commerce. E-commerçants, éditeurs, agences digitales se rencontreront lors de cet événement communautaire et tous avec les mêmes objectifs : l’échange et le partage.",
+      icon: <FaHeart className="text-pink" size={16} />,
+      answer:
+        "Meet Magento France 2025 accueillera les acteurs de l’écosystème Magento et Adobe Commerce. E-commerçants, éditeurs, agences digitales se rencontreront lors de cet événement communautaire et tous avec les mêmes objectifs : l’échange et le partage.",
     },
     {
       question: "Comment puis-je acheter des billets pour l'événement ?",
-      icon: <FaTicketAlt color="#FF7DD1" size={16}/>,
-      answer: "Les billets pour Meet Magento France 2025 sont disponibles ! Rendez-vous sur la billeterie à partir du menu.",
+      icon: <FaTicketAlt className="text-pink" size={16} />,
+      answer:
+        "Les billets pour Meet Magento France 2025 sont disponibles ! Rendez-vous sur la billeterie à partir du menu.",
     },
     {
-      question: "Puis-je proposer un sujet de conférence pour Meet Magento France 2025 ?",
-      icon: <FaStar color="#FF7DD1" size={16}/>,
-      answer: "L’appel à speakers pour Meet Magento France 2025 est maintenant terminé. Les candidatures ont été clôturées le 31 janvier 2025 !",
+      question:
+        "Puis-je proposer un sujet de conférence pour Meet Magento France 2025 ?",
+      icon: <FaStar className="text-pink" size={16} />,
+      answer:
+        "L’appel à speakers pour Meet Magento France 2025 est maintenant terminé. Les candidatures ont été clôturées le 31 janvier 2025 !",
     },
     {
       question: "Que contient un billet pour Meet Magento France 2025 ?",
-      icon: <FaShoppingBag color="#FF7DD1" size={16}/>,
-      answer: "Lorsque vous achetez un billet pour Meet Magento France 2025 vous accédez à la totalité des conférences de l’événement, du petit-déjeuner d’accueil à cocktail dinatoire de clôture, en passant par le déjeuner networking.",
+      icon: <FaShoppingBag className="text-pink" size={16} />,
+      answer:
+        "Lorsque vous achetez un billet pour Meet Magento France 2025 vous accédez à la totalité des conférences de l’événement, du petit-déjeuner d’accueil à cocktail dinatoire de clôture, en passant par le déjeuner networking.",
     },
     {
       question: "What if I don't speak French?",
-      icon: <FaLanguage color="#FF7DD1" size={16}/>,
-      answer: "You are still welcomed! Although the main track will be Business and in French, we will have a secondary track for English Speakers and Tech talks.",
+      icon: <FaLanguage className="text-pink" size={16} />,
+      answer:
+        "You are still welcomed! Although the main track will be Business and in French, we will have a secondary track for English Speakers and Tech talks.",
     },
     {
-      question: "Quels sont les transports à proximité de l'Étoile Business Center ?",
-      icon: <FaBus color="#FF7DD1" size={16}/>,
-      answer: "L'Étoile Business Center est idéalement situé à deux pas de l'Arc de Triomphe. Accès direct par les lignes de métro 1, 2 et 6 (station Charles de Gaulle - Étoile) et le RER A. De nombreuses lignes de bus desservent également le quartier.",
+      question:
+        "Quels sont les transports à proximité de l'Étoile Business Center ?",
+      icon: <FaBus className="text-pink" size={16} />,
+      answer:
+        "L'Étoile Business Center est idéalement situé à deux pas de l'Arc de Triomphe. Accès direct par les lignes de métro 1, 2 et 6 (station Charles de Gaulle - Étoile) et le RER A. De nombreuses lignes de bus desservent également le quartier.",
     },
     {
       question: "Est-ce qu’il y aura un vestiaire sur place ?",
-      icon: <FaTshirt color="#FF7DD1" size={16}/>,
-      answer: "Oui, un vestiaire gratuit sera à votre disposition pendant toute la durée de l'événement."
+      icon: <FaTshirt className="text-pink" size={16} />,
+      answer:
+        "Oui, un vestiaire gratuit sera à votre disposition pendant toute la durée de l'événement.",
     },
   ];
 
   const renderFaqItem = (
-    faq: { question: string, icon: ReactNode, answer: string },
+    faq: { question: string; icon: ReactNode; answer: string },
     index: number
   ) => (
     <div
@@ -93,7 +105,8 @@ const Faq = ({
         <IoIosArrowDown
           className={`flex-shrink-0 text-black bg-white p-1 rounded-full w-6 h-6 transform transition-transform ${
             openIndex === index ? "rotate-180" : ""
-          }`}/>
+          }`}
+        />
       </div>
       {openIndex === index && (
         <div className="mt-2 pl-8">
@@ -107,18 +120,29 @@ const Faq = ({
 
   limit = !limit || limit > faqList.length ? faqList.length : limit;
   const faqWrap = [];
-  if (display === 'grid') {
-    faqWrap.push(faqList.slice(0, Math.ceil((limit) / 2)));
-    faqWrap.push(faqList.slice(Math.ceil((limit) / 2), limit));
+  if (display === "grid") {
+    faqWrap.push(faqList.slice(0, Math.ceil(limit / 2)));
+    faqWrap.push(faqList.slice(Math.ceil(limit / 2), limit));
   } else {
     faqWrap.push(faqList.slice(0, limit));
   }
 
   let faqId = 0;
   return (
-    <div className={display === 'grid' ? 'grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-8 mb-8 md:mb-12' : ''}>
+    <div
+      className={
+        display === "grid"
+          ? "grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-8 mb-8 md:mb-12"
+          : ""
+      }
+    >
       {faqWrap.map((faqItems, wrapIndex) => (
-        <div className={`flex flex-col gap-4 ${display === 'grid' ? 'md:gap-8' : ''}`} key={`faq-wrap-${wrapIndex}`}>
+        <div
+          className={`flex flex-col gap-4 ${
+            display === "grid" ? "md:gap-8" : ""
+          }`}
+          key={`faq-wrap-${wrapIndex}`}
+        >
           {faqItems.map((faq) => (
             <div key={`faq-item-${faq.question}`}>
               {renderFaqItem(faq, faqId++)}
@@ -128,6 +152,6 @@ const Faq = ({
       ))}
     </div>
   );
-}
+};
 
 export default Faq;
diff --git a/src/components/Program/ProgramList.tsx b/src/components/Program/ProgramList.tsx
@@ -8,10 +8,14 @@ import "swiper/css/navigation";
 import useDataProvider from "@/hooks/useDataProvider";
 import ClientOnly from "@/helpers/ClientOnly";
 import ProgramTile from "./ProgramTile";
+import SessionPopIn from "../Speakers/Session/SessionPopIn";
+import { SessionProps } from "../Speakers/Session/SessionProps";
 
 const ProgramList = () => {
   const swiperRef = React.useRef<SwiperClass>(null);
   const sessions = useDataProvider().useSessions();
+  const [selectedSession, setSelectedSession] =
+    React.useState<SessionProps | null>(null);
 
   const handlePrev = () => {
     if (swiperRef.current) {
@@ -69,11 +73,21 @@ const ProgramList = () => {
         >
           {sessions.map((session) => (
             <SwiperSlide key={session.id} className="!h-auto">
-              <ProgramTile session={session} />
+              <ProgramTile
+                session={session}
+                onPopInClick={() => setSelectedSession(session)}
+              />
             </SwiperSlide>
           ))}
         </Swiper>
       </ClientOnly>
+      {selectedSession && (
+        <SessionPopIn
+          selectedSession={selectedSession}
+          isOpen={!!selectedSession}
+          onClose={() => setSelectedSession(null)}
+        />
+      )}
     </section>
   );
 };

diff --git a/src/components/Program/ProgramTile.tsx b/src/components/Program/ProgramTile.tsx
@@ -6,7 +6,13 @@ import Session from "@/components/Speakers/Session/Session";
 import Person from "@/components/Person/Person";
 import ButtonLink from "@/components/ButtonLink/ButtonLink";
 
-const ProgramTile = ({ session }: { session: SessionProps }) => {
+const ProgramTile = ({
+  session,
+  onPopInClick,
+}: {
+  session: SessionProps;
+  onPopInClick: () => void;
+}) => {
   const dataProvider = useDataProvider();
   const speakers = dataProvider
     .usePersonList("speakers", "data.speakers")
@@ -15,7 +21,7 @@ const ProgramTile = ({ session }: { session: SessionProps }) => {
   return (
     <div className="program-tile bg-white rounded-xl flex flex-col justify-between gap-6 p-4 md:p-6 h-full">
       <div className="flex flex-col gap-6">
-        <Session session={session} showAddToCalendar={false} />
+        <Session session={session} onPopInClick={onPopInClick} />
         <div className="program-tile-speakers flex flex-col gap-2">
           {speakers.map((speaker) => (
             <Person person={speaker} appearance="program" key={speaker.id} />

diff --git a/src/components/Speakers/Session/Session.tsx b/src/components/Speakers/Session/Session.tsx
@@ -7,15 +7,15 @@ import Image from "next/image";
 import { PiCalendarPlus } from "react-icons/pi";
 import ButtonLink from "@/components/ButtonLink/ButtonLink";
 import { useTranslation } from "react-i18next";
+import { BsFillInfoCircleFill } from "react-icons/bs";
 
 interface Session {
   session: SessionProps;
-  showAddToCalendar?: boolean;
+  onPopInClick?: () => void;
 }
 
-const Session = ({ session, showAddToCalendar = true }: Session) => {
+const Session = ({ session, onPopInClick }: Session) => {
   const { t } = useTranslation(["speakers"]);
-
   return (
     <div className="flex flex-col md:flex-row justify-between">
       <div className="flex flex-col gap-6">
@@ -36,6 +36,12 @@ const Session = ({ session, showAddToCalendar = true }: Session) => {
             <span>{session.start}</span>
             <span className="mx-1 text-primary">&bull;</span>
             <span>{session.end}</span>
+            {onPopInClick && (
+              <BsFillInfoCircleFill
+                className="text-pink mx-1 hover:cursor-pointer"
+                onClick={onPopInClick}
+              />
+            )}
           </div>
         </div>
         <div className="flex gap-2">
@@ -52,7 +58,7 @@ const Session = ({ session, showAddToCalendar = true }: Session) => {
           ))}
         </div>
       </div>
-      {showAddToCalendar && !!session.eventUrl && (
+      {!!session.eventUrl && (
         <div className="flex flex-col justify-end items-start md:items-end w-full">
           <ButtonLink
             variant="secondary-invert"

diff --git a/src/components/Speakers/Session/SessionPopIn.tsx b/src/components/Speakers/Session/SessionPopIn.tsx
@@ -0,0 +1,22 @@
+import React from "react";
+import { SessionProps } from "./SessionProps";
+import Modal from "@/components/Modal/Modal";
+import SessionPopInContent from "./SessionPopInContent";
+
+const SessionPopIn = ({
+  selectedSession,
+  isOpen,
+  onClose,
+}: {
+  selectedSession: SessionProps;
+  isOpen: boolean;
+  onClose: () => void;
+}) => {
+  return (
+    <Modal isOpen={isOpen} onClose={onClose}>
+      <SessionPopInContent session={selectedSession} />
+    </Modal>
+  );
+};
+
+export default SessionPopIn;
diff --git a/src/components/Speakers/Session/SessionPopInContent.tsx b/src/components/Speakers/Session/SessionPopInContent.tsx
@@ -0,0 +1,37 @@
+import React from "react";
+import { SessionProps } from "./SessionProps";
+import Session from "./Session";
+import Person from "@/components/Person/Person";
+import useDataProvider from "@/hooks/useDataProvider";
+import Typography from "@/components/Typography/Typography";
+import { PiCalendarPlus } from "react-icons/pi";
+
+const SessionPopInContent = ({ session }: { session: SessionProps }) => {
+  const dataProvider = useDataProvider();
+  const speakers = dataProvider
+    .usePersonList("speakers", "data.speakers")
+    .filter((speaker) => session.speakers.includes(speaker.id));
+  return (
+    <div className="session-pop-in-content flex flex-col gap-6">
+      <Session session={session} />
+      <div className="flex flex-col rounded-xl bg-white p-6 gap-6">
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          {speakers.map((speaker) => (
+            <Person person={speaker} appearance="program" key={speaker.id} />
+          ))}
+        </div>
+        <Typography variant="body1">{session.description}</Typography>
+      </div>
+      <div className="flex justify-center">
+        <div className="flex flex-row items-center gap-1 bg-primary px-4 py-2 rounded-full hover:cursor-pointer">
+          <PiCalendarPlus size={20} className="text-white" />
+          <span className="text-base text-white font-semibold">
+            Ajouter cette conférence à mon agenda
+          </span>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default SessionPopInContent;
diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -7,7 +7,7 @@ export default {
     "./src/layouts/**/*.{js,ts,jsx,tsx,mdx}",
     "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
   ],
-  darkMode: 'class',
+  darkMode: "class",
   theme: {
     extend: {
       fontFamily: {
@@ -18,7 +18,7 @@ export default {
         background: "var(--background)",
         foreground: "var(--foreground)",
         royalBlue: "#19009E",
-        royalPink: "#FF7DD1",
+        pink: "#FF7DD1",
         orange: "#EE6524",
         camel: "rgba(255, 212, 181, 0.15)",
         purple: {