migrate to lingui

beszel/site/src/components/mode-toggle.tsx

@@ -3,38 +3,36 @@ import { LaptopIcon, MoonStarIcon, SunIcon } from "lucide-react"
 import { Button } from "@/components/ui/button"
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
 import { useTheme } from "@/components/theme-provider"
-import { useTranslation } from "react-i18next"
 import { cn } from "@/lib/utils"
+import { t, Trans } from "@lingui/macro"
 
 export function ModeToggle() {
-	const { t } = useTranslation()
 	const { theme, setTheme } = useTheme()
 
 	const options = [
 		{
 			theme: "light",
 			Icon: SunIcon,
-			label: t("themes.light"),
+			label: <Trans comment="Light theme">Light</Trans>,
 		},
 		{
 			theme: "dark",
 			Icon: MoonStarIcon,
-			label: t("themes.dark"),
+			label: <Trans comment="Dark theme">Dark</Trans>,
 		},
 		{
 			theme: "system",
 			Icon: LaptopIcon,
-			label: t("themes.system"),
+			label: <Trans comment="System theme">System</Trans>,
 		},
 	]
 
 	return (
 		<DropdownMenu>
 			<DropdownMenuTrigger asChild>
-				<Button variant={"ghost"} size="icon">
+				<Button variant={"ghost"} size="icon" aria-label={t`Toggle theme`}>
 					<SunIcon className="h-[1.2rem] w-[1.2rem] dark:opacity-0" />
 					<MoonStarIcon className="absolute h-[1.2rem] w-[1.2rem] opacity-0 dark:opacity-100" />
-					<span className="sr-only">{t("themes.toggle_theme")}</span>
 				</Button>
 			</DropdownMenuTrigger>
 			<DropdownMenuContent>