setting personality

2025-06-21 17:20:00 +03:30
parent 4c869c42c6
commit 037113ee09
18 changed files with 712 additions and 190 deletions
@@ -0,0 +1,76 @@
+import Button from '@/components/Button';
+import { Add, AlignBottom, AlignHorizontally, AlignLeft, AlignRight, AlignTop, AlignVertically } from 'iconsax-react';
+import { FC, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import ReactQuill from 'react-quill-new';
+
+const TextSidebar: FC = () => {
+
+    const { t } = useTranslation()
+    const [value, setValue] = useState('');
+
+    return (
+        <div>
+            <div className='text-lg'>{t('setting.text')}</div>
+
+            <div className='mt-8'>
+                <ReactQuill
+                    modules={{
+                        toolbar: [
+                            [{ header: '1' }, { header: '2' }, { font: [] }],
+                            [{ list: 'ordered' }, { list: 'bullet' }],
+                            ['bold', 'italic', 'underline'],
+                            ['link', 'image'],
+                            [{ align: [] }],
+                            ['clean']
+                        ]
+                    }}
+                    theme="snow"
+                    value={value}
+                    onChange={setValue}
+                    style={{ minHeight: '120px' }}
+                    className='text-sm'
+                />
+            </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>
+                </div>
+
+                <div>
+                    <div className='text-sm'>
+                        {t('setting.horizontal_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>
+                </div>
+            </div>
+
+            <div className='mt-7'>
+                <Button
+                    onClick={() => null}
+                    className='bg-[#ECEEF5] text-black'
+                >
+                    <div className='flex justify-center items-center gap-2'>
+                        <Add size={24} color='black' />
+                        <span>{t('setting.add_text')}</span>
+                    </div>
+                </Button>
+            </div>
+
+        </div>
+    )
+}
+
+export default TextSidebar