diff --git a/src/components/Countries.tsx b/src/components/Countries.tsx
deleted file mode 100644
index ee4f74a..0000000
--- a/src/components/Countries.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-// components/Countries.ts
-
-export interface Country {
- name: string;
- fa: string;
- flag: string;
-}
-
-export const countries: Country[] = [
- { name: 'Afghanistan', fa: 'افغانستان', flag: 'af' },
- { name: 'Albania', fa: 'آلبانی', flag: 'al' },
- { name: 'Algeria', fa: 'الجزایر', flag: 'dz' },
- { name: 'Argentina', fa: 'آرژانتین', flag: 'ar' },
- { name: 'Armenia', fa: 'ارمنستان', flag: 'am' },
- { name: 'Australia', fa: 'استرالیا', flag: 'au' },
- { name: 'Austria', fa: 'اتریش', flag: 'at' },
- { name: 'Bahrain', fa: 'بحرین', flag: 'bh' },
- { name: 'Canada', fa: 'کانادا', flag: 'ca' },
- { name: 'China', fa: 'چین', flag: 'cn' },
- { name: 'France', fa: 'فرانسه', flag: 'fr' },
- { name: 'Germany', fa: 'آلمان', flag: 'de' },
- { name: 'India', fa: 'هند', flag: 'in' },
- { name: 'Iran', fa: 'ایران', flag: 'ir' },
- { name: 'Iraq', fa: 'عراق', flag: 'iq' },
- { name: 'Italy', fa: 'ایتالیا', flag: 'it' },
- { name: 'Japan', fa: 'ژاپن', flag: 'jp' },
- { name: 'Netherlands', fa: 'هلند', flag: 'nl' },
- { name: 'Pakistan', fa: 'پاکستان', flag: 'pk' },
- { name: 'Qatar', fa: 'قطر', flag: 'qa' },
- { name: 'Russia', fa: 'روسیه', flag: 'ru' },
- { name: 'Saudi Arabia', fa: 'عربستان سعودی', flag: 'sa' },
- { name: 'Spain', fa: 'اسپانیا', flag: 'es' },
- { name: 'Sweden', fa: 'سوئد', flag: 'se' },
- { name: 'Switzerland', fa: 'سوئیس', flag: 'ch' },
- { name: 'Turkey', fa: 'ترکیه', flag: 'tr' },
- { name: 'United Arab Emirates', fa: 'امارات متحده عربی', flag: 'ae' },
- { name: 'United Kingdom', fa: 'بریتانیا', flag: 'gb' },
- { name: 'United States', fa: 'ایالات متحده آمریکا', flag: 'us' },
- { name: 'Yemen', fa: 'یمن', flag: 'ye' },
-];
diff --git a/src/components/CountryFlag.tsx b/src/components/CountryFlag.tsx
index b7be516..e4b7044 100644
--- a/src/components/CountryFlag.tsx
+++ b/src/components/CountryFlag.tsx
@@ -1,46 +1,34 @@
import { Box, Typography } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+import { countries } from '@/features/profile/data/countries';
-export const countryCodeMap: { [key: string]: string } = {
- ایران: 'ir',
- قطر: 'qa',
- آلمان: 'de',
- آمریکا: 'us',
- فرانسه: 'fr',
- ایتالیا: 'it',
- اسپانیا: 'es',
- انگلیس: 'gb',
- کانادا: 'ca',
- استرالیا: 'au',
- چین: 'cn',
- ژاپن: 'jp',
- هند: 'in',
- روسیه: 'ru',
- برزیل: 'br',
- آرژانتین: 'ar',
- ترکیه: 'tr',
- سوئیس: 'ch',
- سوئد: 'se',
- نروژ: 'no',
- عربستان: 'sa',
- امارات: 'ae',
- عراق: 'iq',
- پاکستان: 'pk',
-};
+interface CountryFlagProps {
+ code: string;
+}
-export function CountryFlag({ country }: { country: string }) {
- const countryCode = countryCodeMap[country] || 'un';
- const flagUrl = `https://flagcdn.com/w40/${countryCode}.png`;
+export function CountryFlag({ code }: CountryFlagProps) {
+ const { t } = useTranslation();
+
+ const countryObj = code ? countries.find((c) => c.code === code) : null;
+
+ if (!countryObj) {
+ return null;
+ }
+
+ const displayName = t(countryObj.label);
+ const flagUrl = `https://flagcdn.com/w40/${countryObj.code.toLowerCase()}.png`;
return (
- {country}
+ {displayName}
);
}
diff --git a/src/components/ThemToggle.tsx b/src/components/ThemToggle.tsx
index 22f0b1c..3936f9d 100644
--- a/src/components/ThemToggle.tsx
+++ b/src/components/ThemToggle.tsx
@@ -2,12 +2,17 @@ import { ToggleButtonGroup, ToggleButton, Box } from '@mui/material';
import { useColorScheme } from '@mui/material/styles';
import { Sun1, Moon } from 'iconsax-react';
import { useTranslation } from 'react-i18next';
+import { Icon } from '@rkheftan/harmony-ui';
+import { type MouseEvent } from 'react';
export const ThemeToggleButton = () => {
const { mode, setMode } = useColorScheme();
const { t } = useTranslation('setting');
- const handleChange = (_: any, newMode: 'light' | 'dark' | null) => {
+ const handleChange = (
+ _event: MouseEvent,
+ newMode: 'light' | 'dark' | null,
+ ) => {
if (newMode !== null) {
setMode(newMode);
localStorage.setItem('theme', newMode);
@@ -41,7 +46,7 @@ export const ThemeToggleButton = () => {
},
}}
>
-
+
{t('settings.light')}
@@ -59,7 +64,7 @@ export const ThemeToggleButton = () => {
},
}}
>
-
+
{t('settings.dark')}
diff --git a/src/features/profile/components/setting/Setting.tsx b/src/features/profile/components/setting/Setting.tsx
index b00baaa..73c84f3 100644
--- a/src/features/profile/components/setting/Setting.tsx
+++ b/src/features/profile/components/setting/Setting.tsx
@@ -11,6 +11,8 @@ import { CardContainer } from '@/components/CardContainer';
import { useTranslation } from 'react-i18next';
import { ThemeToggleButton } from '@/components/ThemToggle';
import { PageWrapper } from '../PageWrapper';
+import { Icon } from '@rkheftan/harmony-ui';
+import { Sun1, Moon, Calendar1 } from 'iconsax-react';
export function Setting() {
const { t, i18n } = useTranslation(['setting']);
@@ -21,18 +23,18 @@ export function Setting() {
);
const [draftLanguage, setDraftLanguage] = useState(savedLanguage);
const [isEditing, setIsEditing] = useState(false);
- const [selectedCalendar, setSelectedCalendar] = useState(
- t('settings.solar'),
- );
+ const [selectedCalendar, setSelectedCalendar] = useState<
+ 'christian' | 'solar' | 'lunar'
+ >('solar');
const languageOptions = [
{ code: 'en', label: 'English' },
{ code: 'fa', label: 'فارسی' },
];
- const calendarOptions = [
- t('settings.christian'),
- t('settings.solar'),
- t('settings.lunar'),
+ const calendarOptions: ('christian' | 'solar' | 'lunar')[] = [
+ 'christian',
+ 'solar',
+ 'lunar',
];
const handleDraftLanguageChange = (
@@ -56,6 +58,10 @@ export function Setting() {
const handleEditToggle = () =>
isEditing ? handleSave() : setIsEditing(true);
+ // useEffect(() => {
+ // setSelectedCalendar(t('settings.solar'));
+ // }, [i18n.language, t]);
+
return (
{t('settings.theme')}
-
- {mode === 'light'
- ? t('settings.light')
- : t('settings.dark')}
-
+
+
+
+
+ {mode === 'light'
+ ? t('settings.light')
+ : t('settings.dark')}
+
+
)}
@@ -184,10 +205,11 @@ export function Setting() {
{isEditing ? (
t(`settings.${key}`)}
value={selectedCalendar}
onChange={(_, v) => v && setSelectedCalendar(v)}
- renderInput={(p) => (
-
+ renderInput={(params) => (
+
)}
size="medium"
fullWidth
@@ -197,7 +219,17 @@ export function Setting() {
{t('settings.calendar')}
- {selectedCalendar}
+
+
+
+ {t(`settings.${selectedCalendar}`)}
+
+
)}
diff --git a/src/features/profile/components/userInformation/personalInformation/InfoRowDisplay.tsx b/src/features/profile/components/userInformation/personalInformation/InfoRowDisplay.tsx
index 7cbff85..6fd3cb8 100644
--- a/src/features/profile/components/userInformation/personalInformation/InfoRowDisplay.tsx
+++ b/src/features/profile/components/userInformation/personalInformation/InfoRowDisplay.tsx
@@ -1,7 +1,7 @@
import { Box, Typography, Avatar } from '@mui/material';
import { useTranslation } from 'react-i18next';
-import { CountryFlag } from '@/components/CountryFlag';
import { DisplayField } from './DisplayField';
+import { CountryFlag } from '@/components/CountryFlag';
import { Gender } from '@/features/profile/types';
interface InfoRowData {
@@ -26,6 +26,7 @@ export function InfoRowDisplay({
const { t } = useTranslation('profileSetting');
const displayValue = (value: string) =>
value?.trim() || t('settingForm.notDetermined');
+
const getGenderLabel = (gender: Gender | '') => {
switch (gender) {
case Gender.Male:
@@ -36,6 +37,7 @@ export function InfoRowDisplay({
return t('settingForm.notDetermined');
}
};
+
return (
@@ -70,7 +72,9 @@ export function InfoRowDisplay({
{initials}
- {`${displayValue(data.firstName)} ${displayValue(data.lastName)}`}
+ {`${displayValue(data.firstName)} ${displayValue(
+ data.lastName,
+ )}`}
@@ -79,7 +83,15 @@ export function InfoRowDisplay({
{t('settingForm.country')}
-
+
+ {data.country ? (
+
+ ) : (
+
+ {t('settingForm.notDetermined')}
+
+ )}
+
diff --git a/src/features/profile/components/userInformation/personalInformation/InfoRowEdit.tsx b/src/features/profile/components/userInformation/personalInformation/InfoRowEdit.tsx
index f4887ca..a661093 100644
--- a/src/features/profile/components/userInformation/personalInformation/InfoRowEdit.tsx
+++ b/src/features/profile/components/userInformation/personalInformation/InfoRowEdit.tsx
@@ -7,7 +7,8 @@ import {
Autocomplete,
} from '@mui/material';
import { useTranslation } from 'react-i18next';
-import { CountryFlag, countryCodeMap } from '@/components/CountryFlag';
+import { countries } from '@/features/profile/data/countries';
+import { CountryFlag } from '@/components/CountryFlag';
import { Gender } from '@/features/profile/types';
import { type InfoRowData } from '@/features/profile/types';
@@ -24,44 +25,50 @@ export function InfoRowEdit({
gender,
setGender,
}: InfoRowEditProps) {
- const { t } = useTranslation('profileSetting');
+ const { t } = useTranslation(['countries', 'profileSetting']);
- const labels = [
- {
- name: 'firstName' as keyof InfoRowData,
- label: t('settingForm.name'),
- value: data.firstName,
- },
- {
- name: 'lastName' as keyof InfoRowData,
- label: t('settingForm.familyName'),
- value: data.lastName,
- },
- {
- name: 'nationalCode' as keyof InfoRowData,
- label: t('settingForm.nationalCode'),
- value: data.nationalCode,
- },
- ];
+ const countryOptions = countries.map((c) => ({
+ code: c.code,
+ label: t(c.label, { ns: 'countries' }),
+ }));
+
+ const currentCountry =
+ countryOptions.find((c) => c.code === data.country) || null;
return (
- {labels.map((field, idx) => (
+ {[
+ {
+ name: 'firstName' as keyof InfoRowData,
+ label: t('settingForm.name', { ns: 'profileSetting' }),
+ value: data.firstName,
+ },
+ {
+ name: 'lastName' as keyof InfoRowData,
+ label: t('settingForm.familyName', { ns: 'profileSetting' }),
+ value: data.lastName,
+ },
+ {
+ name: 'nationalCode' as keyof InfoRowData,
+ label: t('settingForm.nationalCode', { ns: 'profileSetting' }),
+ value: data.nationalCode,
+ },
+ ].map(({ name, label, value }) => (
setData((prev) => ({
...prev,
- [field.name]: e.target.value,
+ [name]: e.target.value,
}))
}
- label={field.label}
+ label={label}
/>
))}
@@ -75,36 +82,50 @@ export function InfoRowEdit({
renderValue={(selected) =>
selected ? (
selected === Gender.Male ? (
- t('settingForm.man')
+ t('settingForm.man', { ns: 'profileSetting' })
) : (
- t('settingForm.woman')
+ t('settingForm.woman', { ns: 'profileSetting' })
)
) : (
- {t('settingForm.genderPlaceholder')}
+
+ {t('settingForm.genderPlaceholder', { ns: 'profileSetting' })}
+
)
}
>
-
-
+
+
option.label}
+ value={currentCountry}
onChange={(_, newValue) =>
- setData((prev) => ({ ...prev, country: newValue || '' }))
+ setData((prev) => ({
+ ...prev,
+ country: newValue?.code || '',
+ }))
}
renderOption={(props, option) => (
-
-
+
+
)}
renderInput={(params) => (
-
+
)}
+ clearOnEscape
/>
);