fix: translation and styles

src/features/profile/components/SocialMedia.tsx

@@ -23,8 +23,10 @@ import {
 } from '@mui/material';
 import React, { useState } from 'react';
 import { CardContainer } from '@/components/CardContainer';
+import { useTranslation } from 'react-i18next';
 
 export function SocialMedia() {
+  const { t } = useTranslation('profileSetting');
   const [openDialog, setOpenDialog] = useState(false);
   const [emailInput, setEmailInput] = useState('');
   const [emailError, setEmailError] = useState(false);
@@ -45,8 +47,8 @@ export function SocialMedia() {
   };
 
   const emailList = [
-    { email: 'emailtemp@email.com', provider: 'email' },
-    { email: 'emailtemp@gmail.com', provider: 'google' },
+    { email: 'emailtemp@email.com', provider: 'email', time: '1 ماه پیش' },
+    { email: 'emailtemp@gmail.com', provider: 'google', time: '1 ماه پیش' },
   ];
 
   return (
@@ -59,8 +61,8 @@ export function SocialMedia() {
       }}
     >
       <CardContainer
-        title="ایمیل و شبکه های اجتماعی من"
-        subtitle="این اطلاعات شما صرفاً برای احراز هویت شما است و نزد هارمونی باقی می‌ماند"
+        title={t('settingForm.titleSocial')}
+        subtitle={t('settingForm.descriptionSocial')}
         action={
           <Box sx={{ display: 'flex', justifyContent: 'flex-start' }}>
             <Button
@@ -80,7 +82,7 @@ export function SocialMedia() {
                 px: 2,
               }}
             >
-              افزودن ایمیل / سوشال
+              {t('settingForm.addEmailOrSocialButton')}
               {openMenu && <ArrowDown3 size="20" color="#2979FF" />}
             </Button>
             <Menu
@@ -102,7 +104,7 @@ export function SocialMedia() {
                 <ListItemIcon>
                   <Message size={20} color="black" />
                 </ListItemIcon>
-                <ListItemText>ایمیل</ListItemText>
+                <ListItemText>{t('settingForm.email')}</ListItemText>
               </MenuItem>
               <MenuItem
                 onClick={() => {
@@ -113,7 +115,7 @@ export function SocialMedia() {
                 <ListItemIcon>
                   <Google size={20} color="#4285F4" />
                 </ListItemIcon>
-                <ListItemText>گوگل</ListItemText>
+                <ListItemText>{t('settingForm.google')}</ListItemText>
               </MenuItem>
               <MenuItem
                 onClick={() => {
@@ -124,7 +126,7 @@ export function SocialMedia() {
                 <ListItemIcon>
                   <Apple size={20} color="black" />
                 </ListItemIcon>
-                <ListItemText>اپل</ListItemText>
+                <ListItemText>{t('settingForm.apple')}</ListItemText>
               </MenuItem>
             </Menu>
           </Box>
@@ -180,7 +182,7 @@ export function SocialMedia() {
                     {item.email}
                   </Typography>
                   <Typography variant="caption" color="text.secondary">
-                    ۱ ماه پیش
+                    {item.time}
                   </Typography>
                 </Box>
               </Box>
@@ -211,7 +213,7 @@ export function SocialMedia() {
             <IconButton onClick={handleCloseDialog} size="small">
               <CloseSquare size="24" color="gray" />
             </IconButton>
-            افزودن ایمیل
+            {t('settingForm.addEmailButton')}
           </DialogTitle>
           <DialogContent>
             <Box
@@ -223,10 +225,11 @@ export function SocialMedia() {
               }}
             >
               <Box>
-                <Typography fontWeight="bold">ایمیل جدید</Typography>
+                <Typography fontWeight="bold">
+                  {t('settingForm.newEmail')}
+                </Typography>
                 <Typography variant="body2" color="text.secondary">
-                  با فعال‌سازی ایمیل می‌توانید در دفعات بعدی ورود برای ورود از
-                  این ایمیل استفاده کنید
+                  {t('settingForm.dialogHeader')}
                 </Typography>
               </Box>
               <TextField
@@ -235,8 +238,8 @@ export function SocialMedia() {
                 value={emailInput}
                 onChange={handleEmailChange}
                 error={emailError}
-                helperText={emailError ? 'لطفا یک ایمیل معتبر وارد کنید' : ''}
-                label="ایمیل"
+                helperText={emailError ? t('settingForm.emailError') : ''}
+                label={t('settingForm.email')}
                 placeholder="abc@email.com"
                 sx={{
                   '& .MuiOutlinedInput-root': {
@@ -253,13 +256,13 @@ export function SocialMedia() {
                 }}
                 disabled={emailError || emailInput === ''}
               >
-                ارسال کد تایید
+                {t('settingForm.verificationCodeButton')}
               </Button>
 
               <Box sx={{ display: 'flex', alignItems: 'center', my: 2 }}>
                 <Box sx={{ flex: 1, height: '1px', backgroundColor: '#ccc' }} />
                 <Typography sx={{ mx: 1, fontSize: '12px', color: 'gray' }}>
-                  یا
+                  {t('settingForm.or')}
                 </Typography>
                 <Box sx={{ flex: 1, height: '1px', backgroundColor: '#ccc' }} />
               </Box>
@@ -278,7 +281,7 @@ export function SocialMedia() {
                   }}
                 >
                   <Google size="20" color="#4285F4" style={{ marginLeft: 8 }} />
-                  گوگل
+                  {t('settingForm.google')}
                 </Button>
                 <Button
                   sx={{
@@ -293,7 +296,7 @@ export function SocialMedia() {
                   }}
                 >
                   <Apple size="20" color="black" style={{ marginLeft: 8 }} />
-                  اپل
+                  {t('settingForm.apple')}
                 </Button>
               </Box>
             </Box>