Reusable Push content component

opengento · Feb 1, 2025 · 83c5ab3 · 83c5ab3
1 parent 8197bc8
commit 83c5ab3
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 41 deletions.
diff --git a/public/locales/fr/common.json b/public/locales/fr/common.json
@@ -2,6 +2,11 @@
   "linkedinUrl": "https://www.linkedin.com/company/meet-magento-france",
   "youtubeUrl": "https://www.youtube.com/@MeetMagentoFrance",
   "ticketingUrl": "https://www.eventbrite.fr/e/billets-meet-magento-2025-france-1124570503649",
+  "ticketingLabel": "Je prends mon billet",
+  "programUrl": "/#programs",
+  "programLabel": "Je découvre la programmation",
+  "pushSubtitle": "Rejoignez-nous à Meet Magento France 2025 !",
+  "pushContent": "Réservez votre place dès maintenant et rejoignez-nous pour un événement riche en échanges, en apprentissages et en opportunités !",
   "days": "Jours",
   "hours": "Heures",
   "minutes": "Minutes"

diff --git a/src/app/staff/page.tsx b/src/app/staff/page.tsx
@@ -6,12 +6,11 @@ import Container from "@/layouts/Container";
 import {useTranslation} from "react-i18next";
 import Image from "next/image";
 import React from "react";
-import {PersonProps} from "@/components/Person/PersonProps";
+import { PersonProps } from "@/components/Person/PersonProps";
 import Person from "@/components/Person/Person";
 import useDataProvider from "@/hooks/useDataProvider";
 import PersonPopIn from "@/components/Person/PersonPopIn";
-import ButtonLink from "@/components/ButtonLink/ButtonLink";
-import {IoIosArrowForward} from "react-icons/io";
+import Push from "@/layouts/Push/Push";
 
 export default function Page() {
   const { t } = useTranslation(['staff', 'common']);
@@ -80,44 +79,7 @@ export default function Page() {
             </div>
           ))}
       </div>
-      <ContentMedia
-        imageUrl="/images/media/faq.png"
-        imagePosition="left"
-        imageWidth="40%"
-      >
-        <div className="flex flex-col gap-6 h-full justify-center">
-          <Typography
-            variant="subtitle1"
-            weight="semibold"
-            color="primary"
-          >
-            Rejoignez-nous à Meet Magento France 2025 !
-          </Typography>
-          <Typography color="dark">
-            Réservez votre place dès maintenant et rejoignez-nous pour un événement riche en échanges, en apprentissages et en opportunités !
-          </Typography>
-          <div className="flex flex-row flex-wrap gap-8">
-            <ButtonLink
-              variant="secondary-invert"
-              href="/#programs"
-              iconPosition="right"
-              icon={<IoIosArrowForward />}
-            >
-              Je découvre la programmation
-            </ButtonLink>
-            <ButtonLink
-              variant="secondary-invert"
-              href={t('common:ticketingUrl')}
-              target="_blank"
-              rel="noopener"
-              iconPosition="right"
-              icon={<IoIosArrowForward />}
-            >
-              Je prend mon billet
-            </ButtonLink>
-          </div>
-        </div>
-      </ContentMedia>
+      <Push />
       {selectedStaff && (
         <PersonPopIn
           isOpen={!!selectedStaff}

diff --git a/src/layouts/Push/Push.tsx b/src/layouts/Push/Push.tsx
@@ -0,0 +1,54 @@
+'use client';
+
+import Typography from "@/components/Typography/Typography";
+import ButtonLink from "@/components/ButtonLink/ButtonLink";
+import {IoIosArrowForward} from "react-icons/io";
+import ContentMedia from "@/components/ContentMedia/ContentMedia";
+import {useTranslation} from "react-i18next";
+
+const Push = () => {
+  const { t } = useTranslation(['common']);
+
+  return (
+    <ContentMedia
+      imageUrl="/images/media/faq.png"
+      imagePosition="left"
+      imageWidth="40%"
+    >
+      <div className="flex flex-col gap-6 h-full justify-center">
+        <Typography
+          variant="subtitle1"
+          weight="semibold"
+          color="primary"
+        >
+          {t('common:pushSubtitle')}
+        </Typography>
+        <Typography color="dark">
+          {t('common:pushContent')}
+        </Typography>
+        <div className="flex flex-row flex-wrap gap-8">
+          <ButtonLink
+            variant="secondary-invert"
+            href={t('common:programUrl')}
+            iconPosition="right"
+            icon={<IoIosArrowForward />}
+          >
+            {t('common:programLabel')}
+          </ButtonLink>
+          <ButtonLink
+            variant="secondary-invert"
+            href={t('common:ticketingUrl')}
+            target="_blank"
+            rel="noopener"
+            iconPosition="right"
+            icon={<IoIosArrowForward />}
+          >
+            {t('common:ticketingLabel')}
+          </ButtonLink>
+        </div>
+      </div>
+    </ContentMedia>
+  );
+};
+
+export default Push;