Move nMoreEventsPrev to translations

the-clothing-loop · Dec 7, 2023 · 263052c · 263052c
1 parent 62c6114
commit 263052c
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 6 deletions.
diff --git a/frontend/public/locales/en/translation.json b/frontend/public/locales/en/translation.json
@@ -259,6 +259,7 @@
   "other": "Other",
   "events": "Events",
   "previousEvents": "Previous Events",
+  "nMoreEventsPrev": "<s>{{ n }}</s> more events<br/>previously posted",
   "allEvents": "All Events",
   "eventName": "Event name",
   "sorryNoEvents": "Sorry, there are no events that match these filters.",

diff --git a/frontend/src/pages/Events.tsx b/frontend/src/pages/Events.tsx
@@ -1,6 +1,6 @@
 import { Helmet } from "react-helmet";
 import { useState, useContext, useEffect } from "react";
-import { useTranslation } from "react-i18next";
+import { Trans, useTranslation } from "react-i18next";
 import { Link, useHistory } from "react-router-dom";
 
 import { Event } from "../api/types";
@@ -277,11 +277,15 @@ export default function Events() {
               {nMorePrevEvents ? (
                 <div className="flex justify-center">
                   <h4 className="font-semibold text-black/90 px-3 my-6">
-                    <span className="text-4xl text-accent">
-                      {nMorePrevEvents}
-                    </span>{" "}
-                    more events
-                    <br /> previously entered
+                    <Trans
+                      i18nKey="nMoreEventsPrev"
+                      values={{
+                        n: nMorePrevEvents,
+                      }}
+                      components={{
+                        s: <span className="text-4xl text-accent" />,
+                      }}
+                    />
                   </h4>
                 </div>
               ) : null}