Use useTranslation to StatusRibbon.js

Author: gkatrakazas

src/components/Credentials/StatusRibbon.js

@@ -1,7 +1,10 @@
 // StatusRibbon.js
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 
 const StatusRibbon = ({ expDate }) => {
+	const { t } = useTranslation();
+
 	const CheckExpired = (expDate) => {
 		const today = new Date();
 		const expirationDate = new Date(expDate);
@@ -10,7 +13,7 @@ const StatusRibbon = ({ expDate }) => {
 
 	return (
 		<div className={`absolute bottom-0 right-0 text-white text-xs py-1 px-3 rounded-tl-lg border-t border-l border-white ${CheckExpired(expDate) ? 'bg-red-500' : 'bg-green-500'}`}>
-			{CheckExpired(expDate) ? 'Expired' : 'Active'}
+			{CheckExpired(expDate) ? `${t('statusRibbon.expired')}` : `${t('statusRibbon.active')}`}
 		</div>
 	);
 };

src/locales/en.json

@@ -121,13 +121,13 @@
 		"addPasskey": "Add passkey",
 		"deleteAccount": {
 			"buttonText": "Delete your account",
-			"deleteButtonTitleLocked":"You cannot delete your account while locked",
+			"deleteButtonTitleLocked": "You cannot delete your account while locked",
 			"description": "Once you delete your account, there is no going back. Please be certain.",
 			"messageDeleteAccount1": "Are you sure you want to delete ",
 			"messageDeleteAccount2": "your Account",
 			"title": "Delete account"
 		},
-		"deletePasskeyButtonTitleLocked":"You cannot add passkey while locked",
+		"deletePasskeyButtonTitleLocked": "You cannot add passkey while locked",
 		"description": "View account information and manage passkeys",
 		"lockPasskeyManagement": "Lock passkey management",
 		"noOtherPasskeys": "There are no other passkeys in this account.",
@@ -138,7 +138,7 @@
 			"cancelChangesAriaLabel": "Cancel changes to passkey {{passkeyLabel}}",
 			"created": "Created",
 			"deleteAriaLabel": "Delete passkey {{passkeyLabel}}",
-			"deleteButtonTitleLocked":"You cannot delete passkey while locked",
+			"deleteButtonTitleLocked": "You cannot delete passkey while locked",
 			"lastUsed": "Last Used",
 			"messageDeletePasskeyPart1": "Are you sure you want to delete",
 			"messageDeletePasskeyPart2": "passkey?",
@@ -147,7 +147,7 @@
 			"nicknameInputAriaLabel": "Enter new nickname for passkey {{passkeyLabel}}",
 			"rename": "Rename",
 			"renameAriaLabel": "Rename passkey {{passkeyLabel}}",
-			"renameButtonTitleLocked":"You cannot edit passkey while locked",
+			"renameButtonTitleLocked": "You cannot edit passkey while locked",
 			"saveChangesAriaLabel": "Save changes to passkey {{passkeyLabel}}",
 			"unnamed": "Unnamed passkey"
 		},
@@ -185,5 +185,9 @@
 	"sidebar": {
 		"navItemLogout": "Logout",
 		"poweredBy": "Powered by <docLinkWalletGithub>wwWallet</docLinkWalletGithub>"
+	},
+	"statusRibbon": {
+		"active": "Active",
+		"expired": "Expired"
 	}
 }