Translate tag

app/routes/calendar/index.tsx

@@ -44,6 +44,10 @@ export const meta: MetaFunction = (args) => {
   };
 };
 
+export const handle = {
+  i18n: "calendar",
+};
+
 const loaderSearchParamsSchema = z.object({
   week: z.preprocess(actualNumber, z.number().int().min(1).max(53)),
   year: z.preprocess(actualNumber, z.number().int()),
@@ -354,14 +358,15 @@ function Tags({
 }: {
   tags: Unpacked<UseDataFunctionReturn<typeof loader>["events"]>["tags"];
 }) {
+  const { t } = useTranslation("calendar");
+
   if (tags.length === 0) return null;
 
-  // xxx: fix name
   return (
     <ul className="calendar__event__tags">
       {tags.map((tag) => (
         <li key={tag} style={{ backgroundColor: allTags[tag].color }}>
-          Badge prize
+          {t(`tag.${tag}`)}
         </li>
       ))}
     </ul>

public/locales/en/calendar.json

@@ -0,0 +1,3 @@
+{
+    "tag.BADGE_PRIZE": "Badge prize"
+}

types/react-i18next.d.ts

@@ -5,6 +5,7 @@ import type faq from "../public/locales/en/faq.json";
 import type contributions from "../public/locales/en/contributions.json";
 import type user from "../public/locales/en/user.json";
 import type badges from "../public/locales/en/badges.json";
+import type calendar from "../public/locales/en/calendar.json";
 
 declare module "react-i18next" {
   interface CustomTypeOptions {
@@ -15,6 +16,7 @@ declare module "react-i18next" {
       contributions: typeof contributions;
       user: typeof user;
       badges: typeof badges;
+      calendar: typeof calendar;
     };
   }
 }