ctrl k & i18n

beszel/site/src/components/routes/settings/general.tsx

@@ -12,10 +12,18 @@ import { Separator } from '@/components/ui/separator'
 import { LoaderCircleIcon, SaveIcon } from 'lucide-react'
 import { UserSettings } from '@/types'
 import { saveSettings } from './layout'
-import { useState } from 'react'
+import { useState, useEffect } from 'react'
 // import { Input } from '@/components/ui/input'
+import { useTranslation } from 'react-i18next'
+import languages from '../../../lib/languages.json'
 
 export default function SettingsProfilePage({ userSettings }: { userSettings: UserSettings }) {
+	const { t, i18n } = useTranslation()
+
+	useEffect(() => {
+		document.documentElement.lang = i18n.language;
+	}, [i18n.language]);
+
 	const [isLoading, setIsLoading] = useState(false)
 
 	async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
@@ -30,46 +38,49 @@ export default function SettingsProfilePage({ userSettings }: { userSettings: Us
 	return (
 		<div>
 			<div>
-				<h3 className="text-xl font-medium mb-2">General</h3>
+				<h3 className="text-xl font-medium mb-2">{t('settings.general.title')}</h3>
 				<p className="text-sm text-muted-foreground leading-relaxed">
-					Change general application options.
+					{t('settings.general.subtitle')}
 				</p>
 			</div>
 			<Separator className="my-4" />
 			<form onSubmit={handleSubmit} className="space-y-5">
-				{/* <Separator />
 				<div className="space-y-2">
 					<div className="mb-4">
-						<h3 className="mb-1 text-lg font-medium">Language</h3>
+						<h3 className="mb-1 text-lg font-medium">{t('settings.general.language.title')}</h3>
 						<p className="text-sm text-muted-foreground leading-relaxed">
-							Internationalization will be added in a future release. Please see the{' '}
+							{t('settings.general.language.subtitle_1')}{' '}
 							<a href="#" className="link" target="_blank">
-								discussion on GitHub
+								Crowdin
 							</a>{' '}
-							for more details.
+							{t('settings.general.language.subtitle_2')}
 						</p>
 					</div>
 					<Label className="block" htmlFor="lang">
-						Preferred language
+						{t('settings.general.language.preferred_language')}
 					</Label>
-					<Select defaultValue="en">
+					<Select defaultValue={i18n.language} onValueChange={(lang: string) => i18n.changeLanguage(lang)}>
 						<SelectTrigger id="lang">
 							<SelectValue />
 						</SelectTrigger>
 						<SelectContent>
-							<SelectItem value="en">English</SelectItem>
+							{languages.map((lang) => (
+								<SelectItem key={lang.lang} value={lang.lang}>
+									{lang.label}
+								</SelectItem>
+							))}
 						</SelectContent>
 					</Select>
-				</div> */}
+				</div>
 				<div className="space-y-2">
 					<div className="mb-4">
-						<h3 className="mb-1 text-lg font-medium">Chart options</h3>
+						<h3 className="mb-1 text-lg font-medium">{t('settings.general.chart_options.title')}</h3>
 						<p className="text-sm text-muted-foreground leading-relaxed">
-							Adjust display options for charts.
+							{t('settings.general.chart_options.subtitle')}
 						</p>
 					</div>
 					<Label className="block" htmlFor="chartTime">
-						Default time period
+						{t('settings.general.chart_options.default_time_period')}
 					</Label>
 					<Select
 						name="chartTime"
@@ -88,7 +99,7 @@ export default function SettingsProfilePage({ userSettings }: { userSettings: Us
 						</SelectContent>
 					</Select>
 					<p className="text-[0.8rem] text-muted-foreground">
-						Sets the default time range for charts when a system is viewed.
+						{t('settings.general.chart_options.default_time_period_des')}
 					</p>
 				</div>
 				<Separator />
@@ -102,7 +113,7 @@ export default function SettingsProfilePage({ userSettings }: { userSettings: Us
 					) : (
 						<SaveIcon className="h-4 w-4" />
 					)}
-					Save settings
+					{t('settings.save_settings')}
 				</Button>
 			</form>
 		</div>