update translate and styles

src/app/ui/settings/personal-data-settings.tsx

@@ -1,5 +1,6 @@
 'use client'
 
+import { useTranslations } from 'next-intl';
 import { useActionState, useState } from 'react'
 
 export default function PersonalDataSettings() {
@@ -12,58 +13,82 @@ export default function PersonalDataSettings() {
 
 	const [selectedValue, setSelectedValue] = useState('male');
 
+	const t = useTranslations('Global');
+
 	return (
 		<div className="settings-form">
 			<div className="form-section">
-				<h3 className="form-section-title">👤 Персональные данные</h3>
+				<h3 className="form-section-title">
+					{t('personal-data')}
+				</h3>
 				<form action={formAction}>
 					<div className="form-group">
-						<label className="form-label">Полное имя:</label>
+						<label className="form-label">
+							{t('full-name')}:
+						</label>
 						<input type="text" name="full_name" className="form-input" />
 					</div>
 					<div className="form-group">
-						<label className="form-label">Компания:</label>
+						<label className="form-label">
+							{t('company')}:
+						</label>
 						<input type="text" name="company" className="form-input" />
 					</div>
 					<div className="form-group">
-						<label className="form-label">Email:</label>
+						<label className="form-label">
+							{t('email')}:
+						</label>
 						<input type="text" name="email" className="form-input" />
 						<small>
-							Email нельзя изменить. Обратитесь в поддержку.
+							{t('email-cant-change')}
 						</small>
 					</div>
 					<div className="form-group">
-						<label className="form-label">Телефон:</label>
+						<label className="form-label">
+							{t('phone')}:
+						</label>
 						<input type="phone" name="phone" className="form-input" />
 					</div>
 					<div className="form-group">
-						<label className="form-label">Пол:</label>
+						<label className="form-label">
+							{t('gender')}:
+						</label>
 						<select
 							name="gender"
 							className="form-input"
 							value={selectedValue}
 							onChange={(e) => setSelectedValue(e.target.value)}
 						>
-							<option value="male">Мужской</option>
-							<option value="female">Женский</option>
+							<option value="male">
+								{t('male')}
+							</option>
+							<option value="female">
+								{t('female')}
+							</option>
 						</select>
 					</div>
 					<div className="form-group">
-						<label className="form-label">🎂 День рождения:</label>
+						<label className="form-label">
+							{t('birthday')}:
+						</label>
 						<input type="date" name="birthday" className="form-input" />
 						<small>
-							Используется для отправки поздравления
+							{t('used-to-send-congratulations')}
 						</small>
 					</div>
 					<div className="form-group">
-						<label className="form-label">Возраст:</label>
+						<label className="form-label">
+							{t('age')}:
+						</label>
 						<input type="text" name="age" className="form-input" />
 						<small>
-							Заполняется автоматически исходя из даты рождения
+							{t('automatically-filled-in-based-on-date-of-birth')}
 						</small>
 					</div>
 
-					<button type="submit" className="btn btn-primary">💾 Сохранить изменения</button>
+					<button type="submit" className="btn btn-primary">
+						{t('save-changes')}
+					</button>
 				</form>
 			</div >
 		</div >