font size and font weight + social align

src/langs/fa.json

@@ -96,6 +96,8 @@
     "select": "انتخاب",
     "border": "حاشیه",
     "text_color": "رنگ متن",
+    "font_size": "اندازه فونت",
+    "font_weight": "ضخامت فونت",
     "background_color": "رنگ زمینه",
     "border_color": "رنگ حاشیه",
     "add_button": "اضافه کردن دکمه",

src/pages/setting/personality/components/SocialRenderer.tsx

@@ -132,7 +132,7 @@ const SocialRenderer: FC<SocialRendererProps> = ({ socials, itemId, sectionKey }
                         valign={getVerticalAlign(socials[0]?.verticalAlignment)}
                         style={{ padding: '4px 0' }}
                     >
-                        <div style={{ display: 'flex', justifyContent: getHorizontalAlign(socials[0]?.alignment), gap: '4px', flexWrap: 'wrap' }}>
+                        <div style={{ textAlign: getHorizontalAlign(socials[0]?.alignment) }}>
                             {socials.map((social) => (
                                 <div
                                     key={social.id}
@@ -144,7 +144,8 @@ const SocialRenderer: FC<SocialRendererProps> = ({ socials, itemId, sectionKey }
                                         outlineOffset: '2px',
                                         borderRadius: '4px',
                                         padding: '2px',
-                                        display: 'inline-block'
+                                        display: 'inline-block',
+                                        margin: '2px'
                                     }}
                                 >
                                     <div style={getIconStyle(social)}>

src/pages/setting/personality/components/TextRenderer.tsx

@@ -51,6 +51,7 @@ const TextRenderer: FC<TextRendererProps> = ({ texts, itemId, sectionKey }) => {
                                     style={{
                                         color: textItem.color || '#000000',
                                         fontSize: `${textItem.fontSize || 14}px`,
+                                        fontWeight: textItem.fontWeight || 400,
                                         lineHeight: '1.4',
                                         paddingBottom: textIndex < (texts?.length || 0) - 1 ? '4px' : '0',
                                         pointerEvents: 'none' // Prevent double click handling

src/pages/setting/personality/components/TextSidebar.tsx

@@ -6,12 +6,16 @@ import { usePersonalityStore } from '../store/Store';
 import ColorPicker from '@/components/ColorPicker';
 import { HorizontalAlignment, VerticalAlignment, ElementType } from '../types/Types';
 import Textarea from '@/components/Textarea';
+import Input from '@/components/Input';
+import Select from '@/components/Select';
 
 const TextSidebar: FC = () => {
 
     const { t } = useTranslation()
     const [value, setValue] = useState('');
     const [color, setColor] = useState('#000');
+    const [fontSize, setFontSize] = useState(14);
+    const [fontWeight, setFontWeight] = useState('400');
     const [horizontalPosition, setHorizontalPosition] = useState<HorizontalAlignment>(HorizontalAlignment.CENTER);
     const [verticalPosition, setVerticalPosition] = useState<VerticalAlignment>(VerticalAlignment.MIDDLE);
 
@@ -49,6 +53,8 @@ const TextSidebar: FC = () => {
                 if (text) {
                     setValue(text.text);
                     setColor(text.color || '#000');
+                    setFontSize(text.fontSize || 14);
+                    setFontWeight((text.fontWeight || 400).toString());
                     setHorizontalPosition(text.alignment || HorizontalAlignment.CENTER);
                     setVerticalPosition(text.verticalAlignment || VerticalAlignment.MIDDLE);
                 } else {
@@ -61,6 +67,8 @@ const TextSidebar: FC = () => {
             // Reset form when not in edit mode
             setValue('');
             setColor('#000');
+            setFontSize(14);
+            setFontWeight('400');
             setHorizontalPosition(HorizontalAlignment.CENTER);
             setVerticalPosition(VerticalAlignment.MIDDLE);
         }
@@ -71,13 +79,16 @@ const TextSidebar: FC = () => {
             addTextToActiveItem({
                 text: value,
                 color: color,
+                fontSize: fontSize,
+                fontWeight: parseInt(fontWeight),
                 verticalAlignment: verticalPosition,
                 alignment: horizontalPosition,
             });
 
-            // خالی کردن فیلدها بعد از ذخیره
             setValue('');
             setColor('#000');
+            setFontSize(14);
+            setFontWeight('400');
             setHorizontalPosition(HorizontalAlignment.CENTER);
             setVerticalPosition(VerticalAlignment.MIDDLE);
         }
@@ -92,6 +103,8 @@ const TextSidebar: FC = () => {
                 {
                     text: value,
                     color: color,
+                    fontSize: fontSize,
+                    fontWeight: parseInt(fontWeight),
                     alignment: horizontalPosition,
                     verticalAlignment: verticalPosition,
                 }
@@ -165,6 +178,42 @@ const TextSidebar: FC = () => {
                 />
             </div>
 
+            <div className='mt-5 flex gap-4'>
+                <div className='flex-1'>
+                    <label className='text-sm block mb-2'>
+                        {t('setting.font_size')}
+                    </label>
+                    <Input
+                        max="72"
+                        value={fontSize.toString()}
+                        onChange={(e) => setFontSize(+e.target.value || 0)}
+                        onBlur={(e) => {
+                            if (fontSize === 0 || e.target.value === '') {
+                                setFontSize(14);
+                            }
+                        }}
+                        className='text-sm'
+                        placeholder="14"
+                    />
+                </div>
+                <div className='flex-1'>
+                    <Select
+                        label={t('setting.font_weight')}
+                        value={fontWeight}
+                        onChange={(e) => setFontWeight(e.target.value)}
+                        items={[
+                            { value: '300', label: 'کم‌عرض' },
+                            { value: '400', label: 'معمولی' },
+                            { value: '500', label: 'متوسط' },
+                            { value: '600', label: 'نیمه‌ضخیم' },
+                            { value: '700', label: 'ضخیم' },
+                            { value: '800', label: 'فوق‌ضخیم' },
+                        ]}
+                        className='text-sm'
+                    />
+                </div>
+            </div>
+
             <div className='mt-5 flex justify-between'>
                 <div>
                     <div className='text-sm'>

src/pages/setting/personality/types/Types.ts

@@ -130,6 +130,7 @@ export type TextType = {
   id: string;
   text: string;
   fontSize?: number;
+  fontWeight?: number;
   fontFamily?: string;
   color?: string;
   alignment?: HorizontalAlignment;

src/pages/setting/personality/utils/ExportHTML.ts

@@ -68,9 +68,9 @@ export const exportPersonalityToHTML = async (
           <tr>
             <td align="${textItem.alignment || "right"}" style="color: ${
             textItem.color || "#000000"
-          }; font-size: ${
+          }; font-size: ${textItem.fontSize || 14}px; font-weight: ${
-            textItem.fontSize || 14
+            textItem.fontWeight || 400
-          }px; line-height: 1.4; padding-bottom: ${
+          }; line-height: 1.4; padding-bottom: ${
             textIndex < (texts?.length || 0) - 1 ? "4px" : "0"
           };">
               ${textItem.text}
@@ -282,7 +282,7 @@ export const exportPersonalityToHTML = async (
 
     const getIconStyle = (social: SocialType) => {
       const size = getIconSize(social.size);
-      const baseStyle = `width: ${size}; height: ${size}; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; color: ${
+      const baseStyle = `width: ${size}; height: ${size}; display: inline-block; vertical-align: middle; text-align: center; line-height: ${size}; text-decoration: none; color: ${
         social.color || getSocialColor(social.networkType)
       }; margin: 2px;`;
 
@@ -316,21 +316,19 @@ export const exportPersonalityToHTML = async (
             socials[0]?.alignment
           )}" valign="${getVerticalAlign(
       socials[0]?.verticalAlignment
-    )}" style="padding: 4px 0;">
+    )}" style="padding: 4px 0; text-align: ${getHorizontalAlign(
-            <div style="display: flex; justify-content: ${getHorizontalAlign(
+      socials[0]?.alignment
-              socials[0]?.alignment
+    )};">
-            )}; gap: 4px; flex-wrap: wrap;">
+            ${socials
-              ${socials
+              .map(
-                .map(
+                (social) =>
-                  (social) =>
+                  `<a href="${social.link || "#"}" style="${getIconStyle(
-                    `<a href="${social.link || "#"}" style="${getIconStyle(
+                    social
-                      social
+                  )} text-decoration: none; display: inline-block;">
-                    )} text-decoration: none;">
+                    ${getSocialIcon(social.networkType)}
-                      ${getSocialIcon(social.networkType)}
+                  </a>`
-                    </a>`
+              )
-                )
+              .join("")}
-                .join("")}
-            </div>
           </td>
         </tr>
       </tbody>