Add translations for API Key Alert component

This commit is contained in:
yangdx
2025-03-24 17:04:31 +08:00
parent f8b3f1ee48
commit a0845b37c9
5 changed files with 30 additions and 4 deletions

View File

@@ -1,4 +1,5 @@
import { useState, useCallback, useEffect } from 'react' import { useState, useCallback, useEffect } from 'react'
import { useTranslation } from 'react-i18next'
import { import {
AlertDialog, AlertDialog,
AlertDialogContent, AlertDialogContent,
@@ -18,6 +19,7 @@ interface ApiKeyAlertProps {
} }
const ApiKeyAlert = ({ open: opened, onOpenChange: setOpened }: ApiKeyAlertProps) => { const ApiKeyAlert = ({ open: opened, onOpenChange: setOpened }: ApiKeyAlertProps) => {
const { t } = useTranslation()
const apiKey = useSettingsStore.use.apiKey() const apiKey = useSettingsStore.use.apiKey()
const [tempApiKey, setTempApiKey] = useState<string>('') const [tempApiKey, setTempApiKey] = useState<string>('')
const message = useBackendState.use.message() const message = useBackendState.use.message()
@@ -50,9 +52,9 @@ const ApiKeyAlert = ({ open: opened, onOpenChange: setOpened }: ApiKeyAlertProps
<AlertDialog open={opened} onOpenChange={setOpened}> <AlertDialog open={opened} onOpenChange={setOpened}>
<AlertDialogContent> <AlertDialogContent>
<AlertDialogHeader> <AlertDialogHeader>
<AlertDialogTitle>API Key is required</AlertDialogTitle> <AlertDialogTitle>{t('apiKeyAlert.title')}</AlertDialogTitle>
<AlertDialogDescription> <AlertDialogDescription>
Please enter your API key to access the service {t('apiKeyAlert.description')}
</AlertDialogDescription> </AlertDialogDescription>
</AlertDialogHeader> </AlertDialogHeader>
<div className="flex flex-col gap-4"> <div className="flex flex-col gap-4">
@@ -61,13 +63,13 @@ const ApiKeyAlert = ({ open: opened, onOpenChange: setOpened }: ApiKeyAlertProps
type="password" type="password"
value={tempApiKey} value={tempApiKey}
onChange={handleTempApiKeyChange} onChange={handleTempApiKeyChange}
placeholder="Enter your API key" placeholder={t('apiKeyAlert.placeholder')}
className="max-h-full w-full min-w-0" className="max-h-full w-full min-w-0"
autoComplete="off" autoComplete="off"
/> />
<Button onClick={setApiKey} variant="outline" size="sm"> <Button onClick={setApiKey} variant="outline" size="sm">
Save {t('apiKeyAlert.save')}
</Button> </Button>
</form> </form>
{message && ( {message && (

View File

@@ -259,5 +259,11 @@
}, },
"apiSite": { "apiSite": {
"loading": "جارٍ تحميل وثائق واجهة برمجة التطبيقات..." "loading": "جارٍ تحميل وثائق واجهة برمجة التطبيقات..."
},
"apiKeyAlert": {
"title": "مفتاح واجهة برمجة التطبيقات مطلوب",
"description": "الرجاء إدخال مفتاح واجهة برمجة التطبيقات للوصول إلى الخدمة",
"placeholder": "أدخل مفتاح واجهة برمجة التطبيقات",
"save": "حفظ"
} }
} }

View File

@@ -274,5 +274,11 @@
}, },
"apiSite": { "apiSite": {
"loading": "Loading API Documentation..." "loading": "Loading API Documentation..."
},
"apiKeyAlert": {
"title": "API Key is required",
"description": "Please enter your API key to access the service",
"placeholder": "Enter your API key",
"save": "Save"
} }
} }

View File

@@ -259,5 +259,11 @@
}, },
"apiSite": { "apiSite": {
"loading": "Chargement de la documentation de l'API..." "loading": "Chargement de la documentation de l'API..."
},
"apiKeyAlert": {
"title": "Clé API requise",
"description": "Veuillez entrer votre clé API pour accéder au service",
"placeholder": "Entrez votre clé API",
"save": "Sauvegarder"
} }
} }

View File

@@ -259,5 +259,11 @@
}, },
"apiSite": { "apiSite": {
"loading": "正在加载 API 文档..." "loading": "正在加载 API 文档..."
},
"apiKeyAlert": {
"title": "需要 API Key",
"description": "请输入您的 API Key 以访问服务",
"placeholder": "请输入 API Key",
"save": "保存"
} }
} }