localization

src/apps/officer-web/Screens/Dashboard/Settings/ProfileSettings/Languages.tsx

@@ -2,6 +2,7 @@ import { useState } from 'react';
 import { X } from 'lucide-react';
 import { Label } from '@/components/ui/label';
 import { useSettings } from '@/state/useSettings';
+import { useTranslation } from '@/lib/i18n';
 
 const LANGUAGES = [
   { code: 'en', label: 'English' },
@@ -38,6 +39,7 @@ const getLabel = (code: string) => LANGUAGES.find((l) => l.code === code)?.label
 
 export const Languages = () => {
   const { settings, saveSettings } = useSettings();
+  const { t } = useTranslation();
   const { spoken, default: defaultLang, translateTo } = settings.languages;
   const [addingLang, setAddingLang] = useState('');
 
@@ -65,7 +67,7 @@ export const Languages = () => {
     <div className="grid gap-5">
       {/* Spoken languages */}
       <div className="grid gap-2">
-        <span className="text-sm font-medium text-duck-dark/70">Languages you speak</span>
+        <span className="text-sm font-medium text-duck-dark/70">{t('settings.profile.languages.spokenLabel')}</span>
         <div className="flex flex-wrap gap-2">
           {spoken.map((code) => (
             <span
@@ -91,7 +93,7 @@ export const Languages = () => {
               onChange={(ev) => addSpoken(ev.target.value)}
               className="text-sm border border-duck-dark/20 rounded-md px-3 py-1.5 bg-white/60 text-duck-dark cursor-pointer"
             >
-              <option value="">Add a language...</option>
+              <option value="">{t('settings.profile.languages.addLanguage')}</option>
               {availableToAdd.map((l) => (
                 <option key={l.code} value={l.code}>
                   {l.label}
@@ -104,7 +106,7 @@ export const Languages = () => {
 
       {/* Default language */}
       <Label className="grid gap-2">
-        <span className="text-duck-dark/70">Default language</span>
+        <span className="text-duck-dark/70">{t('settings.profile.languages.defaultLabel')}</span>
         <select
           value={defaultLang}
           onChange={(ev) => save({ ...settings.languages, default: ev.target.value })}
@@ -116,12 +118,12 @@ export const Languages = () => {
             </option>
           ))}
         </select>
-        <span className="text-xs text-duck-dark/40">Used for future UI localization.</span>
+        <span className="text-xs text-duck-dark/40">{t('settings.profile.languages.defaultHint')}</span>
       </Label>
 
-      {/* Translate from */}
+      {/* Translate to */}
       <Label className="grid gap-2">
-        <span className="text-duck-dark/70">Translate to</span>
+        <span className="text-duck-dark/70">{t('settings.profile.languages.translateToLabel')}</span>
         <select
           value={translateTo}
           onChange={(ev) => save({ ...settings.languages, translateTo: ev.target.value })}
@@ -133,7 +135,7 @@ export const Languages = () => {
             </option>
           ))}
         </select>
-        <span className="text-xs text-duck-dark/40">Target language when translating content you don't speak.</span>
+        <span className="text-xs text-duck-dark/40">{t('settings.profile.languages.translateToHint')}</span>
       </Label>
     </div>
   );