Update translations on tokens page

beszel/site/src/components/routes/settings/tokens-fingerprints.tsx

@@ -1,4 +1,4 @@
-import { Trans } from "@lingui/react/macro"
+import { Trans, useLingui } from "@lingui/react/macro"
 import { t } from "@lingui/core/macro"
 import { $publicKey, pb } from "@/lib/stores"
 import { memo, useEffect, useMemo, useState } from "react"
@@ -180,32 +180,33 @@ const SectionUniversalToken = memo(() => {
 })
 
 const ActionsButtonUniversalToken = memo(({ token, checked }: { token: string; checked: boolean }) => {
+	const { t } = useLingui()
 	const publicKey = $publicKey.get()
 	const port = "45876"
 
 	const dropdownItems: DropdownItem[] = [
 		{
-			text: "Copy Docker Compose",
+			text: t({ message: "Copy docker compose", context: "Button to copy docker compose file content" }),
 			onClick: () => copyDockerCompose(port, publicKey, token),
 			icons: [DockerIcon],
 		},
 		{
-			text: "Copy Docker Run",
+			text: t({ message: "Copy docker run", context: "Button to copy docker run command" }),
 			onClick: () => copyDockerRun(port, publicKey, token),
 			icons: [DockerIcon],
 		},
 		{
-			text: "Copy Linux Command",
+			text: t`Copy Linux command`,
 			onClick: () => copyLinuxCommand(port, publicKey, token),
 			icons: [TuxIcon],
 		},
 		{
-			text: "Copy Brew Command",
+			text: t({ message: "Homebrew command", context: "Button to copy install command" }),
 			onClick: () => copyLinuxCommand(port, publicKey, token, true),
 			icons: [TuxIcon, AppleIcon],
 		},
 		{
-			text: "Copy Windows Command",
+			text: t({ message: "Windows command", context: "Button to copy install command" }),
 			onClick: () => copyWindowsCommand(port, publicKey, token),
 			icons: [WindowsIcon],
 		},
@@ -233,26 +234,28 @@ const ActionsButtonUniversalToken = memo(({ token, checked }: { token: string; c
 })
 
 const SectionTable = memo(({ fingerprints = [] }: { fingerprints: FingerprintRecord[] }) => {
+	const { t } = useLingui()
 	const isReadOnly = isReadOnlyUser()
+
 	const headerCols = useMemo(
 		() => [
 			{
-				label: "System",
+				label: t`System`,
 				Icon: ServerIcon,
 				w: "11em",
 			},
 			{
-				label: "Token",
+				label: t`Token`,
 				Icon: KeyIcon,
 				w: "20em",
 			},
 			{
-				label: "Fingerprint",
+				label: t`Fingerprint`,
 				Icon: FingerprintIcon,
 				w: "20em",
 			},
 		],
-		[]
+		[t]
 	)
 	return (
 		<div className="rounded-md border overflow-hidden w-full mt-4">