Fix add to calendar button

opengento · Feb 4, 2025 · 0fe1ffc · 0fe1ffc
1 parent 4165ff6
commit 0fe1ffc
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 21 deletions.
diff --git a/public/locales/fr/speakers.json b/public/locales/fr/speakers.json
@@ -77,7 +77,8 @@
         "start": "9h00",
         "end": "10h30",
         "tags": ["Ouverture", "Business", "Expertise"],
-        "speakers": [1]
+        "speakers": [1],
+        "eventUrl": null
       },
       {
         "id": 2,
@@ -89,7 +90,8 @@
         "start": "9h00",
         "end": "10h30",
         "tags": ["Technical", "Expertise"],
-        "speakers": [2]
+        "speakers": [2],
+        "eventUrl": null
       },
       {
         "id": 3,
@@ -101,7 +103,8 @@
         "start": "9h00",
         "end": "10h30",
         "tags": ["Technical", "Expertise"],
-        "speakers": [3]
+        "speakers": [3],
+        "eventUrl": null
       },
       {
         "id": 4,
@@ -113,7 +116,8 @@
         "start": "9h00",
         "end": "10h30",
         "tags": ["Technical", "Expertise"],
-        "speakers": [4]
+        "speakers": [4],
+        "eventUrl": null
       }
     ]
   }

diff --git a/src/components/Program/ProgramTile.tsx b/src/components/Program/ProgramTile.tsx
@@ -1,9 +1,11 @@
 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";
+import { SessionProps } from "@/components/Speakers/Session/SessionProps";
+import Session from "@/components/Speakers/Session/Session";
+import Person from "@/components/Person/Person";
+import ButtonLink from "@/components/ButtonLink/ButtonLink";
+import Typography from "@/components/Typography/Typography";
 
 const ProgramTile = ({ session }: { session: SessionProps }) => {
   const dataProvider = useDataProvider();
@@ -12,23 +14,27 @@ const ProgramTile = ({ session }: { session: SessionProps }) => {
     .filter((speaker) => session.speakers.includes(speaker.id));
 
   return (
-    <div className="program-tile bg-white rounded-xl flex flex-col justify-between gap-6 p-4 md:p-6 h-full group">
+    <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} />
+        <Session session={session} showAddToCalendar={false} />
         <div className="program-tile-speakers flex flex-col gap-2">
           {speakers.map((speaker) => (
             <Person person={speaker} appearance="program" key={speaker.id} />
           ))}
         </div>
       </div>
-      <div className="flex justify-center">
-        <div className="flex flex-row items-center gap-1 bg-primary px-4 py-2 rounded-full lg:opacity-0 lg:group-hover:opacity-100 lg:transition-opacity lg:duration-300 lg:hover:cursor-pointer">
-          <PiCalendarPlus size={20} className="text-white" />
-          <span className="text-sm text-white font-semibold">
+      {!!session.eventUrl && (
+        <div className="mx-auto">
+          <ButtonLink
+            variant="secondary-invert"
+            href={session.eventUrl}
+            iconPosition="left"
+            icon={<PiCalendarPlus />}
+          >
             Ajouter à mon agenda
-          </span>
+          </ButtonLink>
         </div>
-      </div>
+      )}
     </div>
   );
 };

diff --git a/src/components/Speakers/Session/Session.tsx b/src/components/Speakers/Session/Session.tsx
@@ -8,7 +8,12 @@ import { PiCalendarPlus } from "react-icons/pi";
 import ButtonLink from "@/components/ButtonLink/ButtonLink";
 import { useTranslation } from "react-i18next";
 
-const Session = ({ session }: { session: SessionProps }) => {
+interface Session {
+  session: SessionProps;
+  showAddToCalendar?: boolean;
+}
+
+const Session = ({ session, showAddToCalendar = true }: Session) => {
   const { t } = useTranslation(["speakers"]);
 
   return (
@@ -47,17 +52,15 @@ const Session = ({ session }: { session: SessionProps }) => {
           ))}
         </div>
       </div>
-      {!!session.eventUrl && (
+      {showAddToCalendar && !!session.eventUrl && (
         <div className="flex flex-col justify-end items-start md:items-end w-full">
           <ButtonLink
             variant="secondary-invert"
             href={session.eventUrl}
             iconPosition="left"
-            icon={<PiCalendarPlus size={24} className="text-white" />}
+            icon={<PiCalendarPlus />}
           >
-            <Typography variant="body1" weight="semibold" color="light">
-              Ajouter à mon agenda
-            </Typography>
+            Ajouter à mon agenda
           </ButtonLink>
         </div>
       )}