feat: add multi-lang

apps/desktop/src/routes/auth/login-key.tsx

@@ -4,6 +4,7 @@ import { useStorage } from "@lume/storage";
 import { getPublicKey, nip19 } from "nostr-tools";
 import { useState } from "react";
 import { useForm } from "react-hook-form";
+import { Trans, useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
 import { toast } from "sonner";
 
@@ -15,6 +16,7 @@ export function LoginWithKey() {
 	const [showKey, setShowKey] = useState(false);
 	const [loading, setLoading] = useState(false);
 
+	const { t } = useTranslation("loginWithPrivkey.subtitle");
 	const {
 		register,
 		handleSubmit,
@@ -52,9 +54,14 @@ export function LoginWithKey() {
 		<div className="relative flex items-center justify-center w-full h-full">
 			<div className="flex flex-col w-full max-w-md gap-8 mx-auto">
 				<div className="flex flex-col gap-1 text-center items-center">
-					<h1 className="text-2xl font-semibold">Enter your Private Key</h1>
-					<p className="text-lg font-medium leading-snug text-neutral-600 dark:text-neutral-500">
-						Lume will put your private key to{" "}
+					<h1 className="text-2xl font-semibold">
+						{t("loginWithPrivkey.title")}
+					</h1>
+					<Trans
+						t={t}
+						className="text-lg font-medium whitespace-pre-line leading-snug text-neutral-600 dark:text-neutral-500"
+					>
+						Lume will put your private key to
 						<span className="text-teal-500">
 							{storage.platform === "macos"
 								? "Apple Keychain"
@@ -62,10 +69,8 @@ export function LoginWithKey() {
 								  ? "Credential Manager"
 								  : "Secret Service"}
 						</span>
-						.
-						<br />
-						It will be secured by your OS.
-					</p>
+						. It will be secured by your OS.
+					</Trans>
 				</div>
 				<div className="flex flex-col gap-6">
 					<form
@@ -107,7 +112,7 @@ export function LoginWithKey() {
 							{loading ? (
 								<LoaderIcon className="size-5 animate-spin" />
 							) : (
-								"Continue"
+								t("global.continue")
 							)}
 						</button>
 					</form>