add renderer components

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

@@ -3,11 +3,39 @@ import { Add, AlignBottom, AlignHorizontally, AlignLeft, AlignRight, AlignTop, A
 import { FC, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import ReactQuill from 'react-quill-new';
+import { usePersonalityStore } from '../store/Store';
+import ColorPicker from '@/components/ColorPicker';
+import { HorizontalAlignment, VerticalAlignment } from '../types/Types';
 
 const TextSidebar: FC = () => {
 
     const { t } = useTranslation()
     const [value, setValue] = useState('');
+    const [color, setColor] = useState('#000');
+    const [horizontalPosition, setHorizontalPosition] = useState<HorizontalAlignment>(HorizontalAlignment.CENTER);
+    const [verticalPosition, setVerticalPosition] = useState<VerticalAlignment>(VerticalAlignment.MIDDLE);
+    const { addTextToActiveItem } = usePersonalityStore();
+
+    const handleChange = (value: string) => {
+        setValue(value);
+    }
+
+    const handleAddText = () => {
+        if (value.trim()) {
+            addTextToActiveItem({
+                text: value,
+                color: color,
+                verticalAlignment: verticalPosition,
+                alignment: horizontalPosition,
+            });
+
+            // خالی کردن فیلدها بعد از ذخیره
+            setValue('');
+            setColor('#000');
+            setHorizontalPosition(HorizontalAlignment.CENTER);
+            setVerticalPosition(VerticalAlignment.MIDDLE);
+        }
+    }
 
     return (
         <div>
@@ -27,39 +55,71 @@ const TextSidebar: FC = () => {
                     }}
                     theme="snow"
                     value={value}
-                    onChange={setValue}
+                    onChange={handleChange}
                     style={{ minHeight: '120px' }}
                     className='text-sm'
                 />
             </div>
 
+            <div className='mt-5'>
+                <ColorPicker
+                    changeColor={setColor}
+                    label={t('setting.text_color')}
+                    defaultColor={color}
+                />
+            </div>
+
             <div className='mt-5 flex justify-between'>
                 <div>
                     <div className='text-sm'>
                         {t('setting.horizontal_position')}
                     </div>
                     <div className='mt-3 flex gap-4'>
-                        <AlignRight size={20} color='#000' />
-                        <AlignVertically size={20} color='#000' />
-                        <AlignLeft size={20} color='#000' />
+                        <div
+                            onClick={() => setHorizontalPosition(HorizontalAlignment.RIGHT)}
+                        >
+                            <AlignRight size={20} color={horizontalPosition === HorizontalAlignment.RIGHT ? '#0038FF' : '#000'} />
+                        </div>
+                        <div
+                            onClick={() => setHorizontalPosition(HorizontalAlignment.CENTER)}
+                        >
+                            <AlignVertically size={20} color={horizontalPosition === HorizontalAlignment.CENTER ? '#0038FF' : '#000'} />
+                        </div>
+                        <div
+                            onClick={() => setHorizontalPosition(HorizontalAlignment.LEFT)}
+                        >
+                            <AlignLeft size={20} color={horizontalPosition === HorizontalAlignment.LEFT ? '#0038FF' : '#000'} />
+                        </div>
                     </div>
                 </div>
 
                 <div>
                     <div className='text-sm'>
-                        {t('setting.horizontal_position')}
+                        {t('setting.vertical_position')}
                     </div>
                     <div className='mt-3 flex gap-4'>
-                        <AlignBottom size={20} color='#000' />
-                        <AlignHorizontally size={20} color='#000' />
-                        <AlignTop size={20} color='#000' />
+                        <div
+                            onClick={() => setVerticalPosition(VerticalAlignment.TOP)}
+                        >
+                            <AlignBottom size={20} color={verticalPosition === VerticalAlignment.TOP ? '#0038FF' : '#000'} />
+                        </div>
+                        <div
+                            onClick={() => setVerticalPosition(VerticalAlignment.MIDDLE)}
+                        >
+                            <AlignHorizontally size={20} color={verticalPosition === VerticalAlignment.MIDDLE ? '#0038FF' : '#000'} />
+                        </div>
+                        <div
+                            onClick={() => setVerticalPosition(VerticalAlignment.BOTTOM)}
+                        >
+                            <AlignTop size={20} color={verticalPosition === VerticalAlignment.BOTTOM ? '#0038FF' : '#000'} />
+                        </div>
                     </div>
                 </div>
             </div>
 
             <div className='mt-7'>
                 <Button
-                    onClick={() => null}
+                    onClick={handleAddText}
                     className='bg-[#ECEEF5] text-black'
                 >
                     <div className='flex justify-center items-center gap-2'>