data prop for i18n

apps/login/src/components/consent.tsx

@@ -74,7 +74,11 @@ export function ConsentScreen({
       </ul>
 
       <p className="ztdl-p text-xs text-left">
-        {t("device.request.disclaimer", { appName: appName })}
+        <Translated
+          i18nKey="request.disclaimer"
+          namespace="device"
+          data={{ appName: appName }}
+        />
       </p>
 
       {error && (

apps/login/src/components/session-clear-item.tsx

@@ -71,10 +71,13 @@ export function SessionClearItem({
         </span>
         {valid ? (
           <span className="text-xs opacity-80 text-ellipsis">
-            {verifiedAt &&
+            {verifiedAt && (
-              t("verfiedAt", {
+              <Translated
-                time: moment(timestampDate(verifiedAt)).fromNow(),
+                i18nKey="verfiedAt"
-              })}
+                namespace="logout"
+                data={{ time: moment(timestampDate(verifiedAt)).fromNow() }}
+              />
+            )}
           </span>
         ) : (
           verifiedAt && (

apps/login/src/components/translated.tsx

@@ -4,18 +4,20 @@ export function Translated({
   i18nKey,
   children,
   namespace,
+  data,
   ...props
 }: {
   i18nKey: string;
   children?: React.ReactNode;
   namespace?: string;
+  data?: any;
 } & React.HTMLAttributes<HTMLSpanElement>) {
   const t = useTranslations(namespace);
   const helperKey = `${namespace ? `${namespace}.` : ""}${i18nKey}`;
 
   return (
     <span data-i18n-key={helperKey} {...props}>
-      {t(i18nKey)}
+      {t(i18nKey, data)}
     </span>
   );
 }