Bläddra i källkod

feat(locales): add alert messages for user progress storage in both English and French
refactor(local-alert): implement localization for alert messages using useI18n hook to enhance user experience

Mathias 1 månad sedan
förälder
incheckning
359b1d45ed
3 ändrade filer med 20 tillägg och 5 borttagningar
  1. 6 0
      locales/en.ts
  2. 6 0
      locales/fr.ts
  3. 8 5
      src/components/ui/local-alert.tsx

+ 6 - 0
locales/en.ts

@@ -47,6 +47,12 @@ export default {
 
   profile: {
     new_workout: "New Workout",
+    alert: {
+      title: "Your progress is stored in your browser.",
+      create_account: "Create an account",
+      log_in: "Log in",
+      to_ensure_it_is_not_getting_lost: "to ensure it is not getting lost.",
+    },
   },
 
   // Release Notes

+ 6 - 0
locales/fr.ts

@@ -47,6 +47,12 @@ export default {
 
   profile: {
     new_workout: "Nouvelle séance",
+    alert: {
+      title: "Votre progression est stockée dans votre navigateur.",
+      create_account: "Créer un compte",
+      log_in: "Se connecter",
+      to_ensure_it_is_not_getting_lost: "pour la sauvegarder.",
+    },
   },
 
   // Release Notes

+ 8 - 5
src/components/ui/local-alert.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import Link from "next/link";
 
+import { useI18n } from "locales/client";
 import { cn } from "@/shared/lib/utils";
 import { paths } from "@/shared/constants/paths";
 import { Alert, AlertDescription } from "@/components/ui/alert";
@@ -10,19 +11,21 @@ interface LocalAlertProps {
 }
 
 export const LocalAlert = ({ className }: LocalAlertProps) => {
+  const t = useI18n();
+
   return (
     <Alert className={cn("bg-blue-100 border-0 text-black", className)} variant="info">
       <AlertDescription className="flex flex-wrap items-center gap-1 italic text-base">
-        Your progress is stored in your browser.
+        {t("profile.alert.title")}
         <br className="sm:hidden" />
         <Link className="ml-1 mr-1 font-medium text-blue-700 underline" href={paths.signUp}>
-          Create an account
+          {t("profile.alert.create_account")}
         </Link>
-        or
+        {t("commons.or").toLocaleLowerCase()}
         <Link className="ml-1 font-medium text-purple-700 underline" href={paths.signIn}>
-          Log-in
+          {t("profile.alert.log_in")}
         </Link>
-        to ensure it is not getting lost
+        {t("profile.alert.to_ensure_it_is_not_getting_lost")}
       </AlertDescription>
     </Alert>
   );