feat: migrate note component to i18n

packages/ark/src/components/note/nip89.tsx

@@ -1,4 +1,5 @@
 import { useQuery } from "@tanstack/react-query";
+import { useTranslation } from "react-i18next";
 import { useArk } from "../../hooks/useArk";
 import { AppHandler } from "./appHandler";
 import { useNoteContext } from "./provider";
@@ -7,6 +8,7 @@ export function NIP89({ className }: { className?: string }) {
 	const ark = useArk();
 	const event = useNoteContext();
 
+	const { t } = useTranslation();
 	const { isLoading, isError, data } = useQuery({
 		queryKey: ["app-recommend", event.id],
 		queryFn: () => {
@@ -33,7 +35,7 @@ export function NIP89({ className }: { className?: string }) {
 			<div className="flex flex-col rounded-lg bg-neutral-100 dark:bg-neutral-900">
 				<div className="inline-flex items-center justify-between h-10 px-3 border-b shrink-0 border-neutral-200 dark:border-neutral-800">
 					<p className="text-sm font-medium text-amber-400">
-						Lume isn't support this event
+						{t("nip89.unsupported")}
 					</p>
 					<p className="text-sm text-neutral-600 dark:text-neutral-400">
 						{event.kind}
@@ -41,10 +43,10 @@ export function NIP89({ className }: { className?: string }) {
 				</div>
 				<div className="flex flex-col flex-1 gap-2 px-3 py-3">
 					<span className="text-sm font-medium uppercase text-neutral-600 dark:text-neutral-400">
-						Open with
+						{t("nip89.openWith")}
 					</span>
-					{data.map((item, index) => (
-						<AppHandler key={item[1] + index} tag={item} />
+					{data.map((item) => (
+						<AppHandler key={item[1]} tag={item} />
 					))}
 				</div>
 			</div>