setting personality
This commit is contained in:
hamid zarghami
@@ -7,7 +7,7 @@ import Personality from './personality/Personality'
|
||||
import Domain from './domain/Domain'
|
||||
import MailServer from './mail-server/MailServer'
|
||||
import Address from './address/Address'
|
||||
import PersonalitySidebar from './personality/Setting'
|
||||
import PersonalitySidebar from './personality/SideBar'
|
||||
|
||||
const Setting: FC = () => {
|
||||
const { t } = useTranslation()
|
||||
|
||||
@@ -4,3 +4,10 @@ export enum SettingTabEnum {
|
||||
SETTING_ADDRESS = "setting_address",
|
||||
SETTING_PERSONALITY = "setting_personality",
|
||||
}
|
||||
|
||||
export enum SideBarTab {
|
||||
SETTING = "setting",
|
||||
TEXT = "text",
|
||||
BUTTON = "button",
|
||||
IMAGE = "image",
|
||||
}
|
||||
|
||||
@@ -1,162 +0,0 @@
|
||||
import { FC } from 'react'
|
||||
import { ArrowDown2, Gallery, LinkSquare, Setting4, Shapes, Text } from 'iconsax-react'
|
||||
import Logo from '@/assets/images/logo-small.svg'
|
||||
|
||||
const PersonalitySidebar: FC = () => {
|
||||
return (
|
||||
<div className='bg-white rounded-3xl w-[360px] flex'>
|
||||
<div className='flex-1 p-6'>
|
||||
<div className='text-xl font-semibold text-right mb-6'>تنظیمات</div>
|
||||
|
||||
{/* Layout options */}
|
||||
<div className='mb-6'>
|
||||
<div className='grid grid-cols-2 gap-3'>
|
||||
<div className='border border-gray-200 rounded-xl p-2'>
|
||||
<div className='flex h-full'>
|
||||
<div className='w-full h-12 bg-gray-100 rounded-lg'></div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='border border-gray-200 rounded-xl p-2'>
|
||||
<div className='flex h-full'>
|
||||
<div className='w-full h-12 bg-gray-100 rounded-lg'></div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='border border-gray-200 rounded-xl p-2'>
|
||||
<div className='grid grid-cols-2 gap-1 w-full h-full'>
|
||||
<div className='bg-gray-100 rounded-lg'></div>
|
||||
<div className='bg-gray-100 rounded-lg'></div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='border border-gray-200 rounded-xl p-2'>
|
||||
<div className='grid grid-cols-3 gap-1 w-full h-full'>
|
||||
<div className='bg-gray-100 rounded-lg'></div>
|
||||
<div className='bg-gray-100 rounded-lg'></div>
|
||||
<div className='bg-gray-100 rounded-lg'></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Color picker section */}
|
||||
<div className='mb-6'>
|
||||
<div className='flex justify-end mb-2'>
|
||||
<span className='text-sm text-gray-600'>رنگ زمینه</span>
|
||||
</div>
|
||||
<div className='flex flex-col items-center'>
|
||||
<div className='w-full h-36 bg-[#FF008A] rounded-lg mb-3'></div>
|
||||
<div className='flex items-center w-full'>
|
||||
<div className='flex'>
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="12" cy="12" r="10" fill="url(#paint0_angular_121_3242)" stroke="#E5E7EB" strokeWidth="1.5" />
|
||||
<circle cx="12" cy="12" r="3" fill="#FF008A" stroke="white" strokeWidth="1.5" />
|
||||
<defs>
|
||||
<radialGradient id="paint0_angular_121_3242" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(12 12) rotate(90) scale(10)">
|
||||
<stop offset="0" stopColor="#FF0000" />
|
||||
<stop offset="0.17" stopColor="#FFFF00" />
|
||||
<stop offset="0.33" stopColor="#00FF00" />
|
||||
<stop offset="0.5" stopColor="#00FFFF" />
|
||||
<stop offset="0.67" stopColor="#0000FF" />
|
||||
<stop offset="0.83" stopColor="#FF00FF" />
|
||||
<stop offset="1" stopColor="#FF0000" />
|
||||
</radialGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
</div>
|
||||
<div className='text-sm text-gray-500 ml-auto text-right'>#FF008A</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Upload image section */}
|
||||
<div className='border border-dashed border-gray-300 rounded-lg p-5 mb-6'>
|
||||
<div className='flex flex-col items-center'>
|
||||
<div className='mb-3'>
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect width="24" height="24" rx="4" fill="#F3F4F6" />
|
||||
<path d="M17 9.5C17 11.7091 15.2091 13.5 13 13.5C10.7909 13.5 9 11.7091 9 9.5C9 7.29086 10.7909 5.5 13 5.5C15.2091 5.5 17 7.29086 17 9.5Z" stroke="#9CA3AF" strokeWidth="1" />
|
||||
<path d="M3 20.5L8 15.5L10.5 17L14.5 13L21 19.5" stroke="#9CA3AF" strokeWidth="1" />
|
||||
</svg>
|
||||
</div>
|
||||
<div className='text-center text-xs text-gray-500 mb-3'>تصویر پس زمینه مورد نظر را آپلود کنید</div>
|
||||
<button className='flex items-center gap-1 bg-white border border-gray-200 rounded-lg px-3 py-1 text-xs'>
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M9 17V11L7 13" stroke="#292D32" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M9 11L11 13" stroke="#292D32" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M22 10V15C22 20 20 22 15 22H9C4 22 2 20 2 15V9C2 4 4 2 9 2H14" stroke="#292D32" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M22 10H18C15 10 14 9 14 6V2L22 10Z" stroke="#292D32" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>
|
||||
آپلود
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Other settings */}
|
||||
<div className='mb-4'>
|
||||
<div className='flex justify-end mb-2'>
|
||||
<span className='text-sm text-gray-600'>سایر</span>
|
||||
</div>
|
||||
<div className='flex items-center justify-between border border-gray-200 rounded-lg p-2'>
|
||||
<ArrowDown2 size={16} />
|
||||
<span className='text-sm'>پوشش</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Positioning options */}
|
||||
<div>
|
||||
<div className='flex justify-between mb-2'>
|
||||
<div className='text-sm text-gray-600'>موقعیت افقی</div>
|
||||
<div className='text-sm text-gray-600'>موقعیت عمودی</div>
|
||||
</div>
|
||||
<div className='flex justify-between'>
|
||||
<div className='flex gap-1'>
|
||||
<button className='w-7 h-7 border border-gray-200 rounded flex items-center justify-center'>
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M4.5 7H19.5M7.5 12H16.5M10.5 17H13.5" stroke="#292D32" strokeWidth="1.5" strokeLinecap="round" />
|
||||
</svg>
|
||||
</button>
|
||||
<button className='w-7 h-7 border border-gray-200 rounded flex items-center justify-center'>
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M7.5 7H16.5M4.5 12H19.5M10.5 17H13.5" stroke="#292D32" strokeWidth="1.5" strokeLinecap="round" />
|
||||
</svg>
|
||||
</button>
|
||||
<button className='w-7 h-7 border border-gray-200 rounded flex items-center justify-center'>
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M10.5 7H13.5M7.5 12H16.5M4.5 17H19.5" stroke="#292D32" strokeWidth="1.5" strokeLinecap="round" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div className='flex gap-1'>
|
||||
<button className='w-7 h-7 border border-gray-200 rounded flex items-center justify-center'>
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M7 4.5V19.5M12 7.5V16.5M17 10.5V13.5" stroke="#292D32" strokeWidth="1.5" strokeLinecap="round" />
|
||||
</svg>
|
||||
</button>
|
||||
<button className='w-7 h-7 border border-gray-200 rounded flex items-center justify-center'>
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M7 7.5V16.5M12 4.5V19.5M17 10.5V13.5" stroke="#292D32" strokeWidth="1.5" strokeLinecap="round" />
|
||||
</svg>
|
||||
</button>
|
||||
<button className='w-7 h-7 border border-gray-200 rounded flex items-center justify-center'>
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M7 10.5V13.5M12 7.5V16.5M17 4.5V19.5" stroke="#292D32" strokeWidth="1.5" strokeLinecap="round" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='w-20 border-r border-gray-200 flex flex-col items-center pt-6 pb-6'>
|
||||
<img src={Logo} className='w-8' alt="Logo" />
|
||||
<div className='flex flex-col gap-10 mt-16'>
|
||||
<Setting4 size={22} color='black' variant='Bold' />
|
||||
<Text size={22} color='black' />
|
||||
<LinkSquare size={22} color='black' />
|
||||
<Gallery size={22} color='black' />
|
||||
<Shapes size={22} color='black' />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default PersonalitySidebar
|
||||
@@ -0,0 +1,41 @@
|
||||
import { FC, useState } from 'react'
|
||||
import { Gallery, LinkSquare, Setting4, Text } from 'iconsax-react'
|
||||
import Logo from '@/assets/images/logo-small.svg'
|
||||
import SettingSideBar from './components/SettingSideBar'
|
||||
import { SideBarTab } from '../enum/SettingEnum'
|
||||
import TextSidebar from './components/TextSidebar'
|
||||
import ButtonSidebar from './components/ButtonSidebar'
|
||||
import ImageSideBar from './components/ImageSideBar'
|
||||
|
||||
const PersonalitySidebar: FC = () => {
|
||||
|
||||
const [active, setActive] = useState<SideBarTab>(SideBarTab.SETTING)
|
||||
|
||||
return (
|
||||
<div className='bg-white rounded-3xl w-[360px] flex'>
|
||||
<div className='flex-1 p-6'>
|
||||
{
|
||||
active === SideBarTab.SETTING ? <SettingSideBar />
|
||||
: active === SideBarTab.TEXT ? <TextSidebar />
|
||||
: active === SideBarTab.BUTTON ? <ButtonSidebar />
|
||||
: active === SideBarTab.IMAGE ? <ImageSideBar />
|
||||
: null
|
||||
}
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
<div className='w-20 border-r border-gray-200 flex flex-col items-center pt-6 pb-6'>
|
||||
<img src={Logo} className='w-8' alt="Logo" />
|
||||
<div className='flex flex-col gap-10 mt-16'>
|
||||
<Setting4 size={22} color='black' variant={SideBarTab.SETTING === active ? 'Bold' : 'Outline'} onClick={() => setActive(SideBarTab.SETTING)} className='cursor-pointer' />
|
||||
<Text size={22} color='black' variant={SideBarTab.TEXT === active ? 'Bold' : 'Outline'} onClick={() => setActive(SideBarTab.TEXT)} className='cursor-pointer' />
|
||||
<LinkSquare size={22} color='black' variant={SideBarTab.BUTTON === active ? 'Bold' : 'Outline'} onClick={() => setActive(SideBarTab.BUTTON)} className='cursor-pointer' />
|
||||
<Gallery size={22} color='black' variant={SideBarTab.IMAGE === active ? 'Bold' : 'Outline'} onClick={() => setActive(SideBarTab.IMAGE)} className='cursor-pointer' />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default PersonalitySidebar
|
||||
@@ -0,0 +1,119 @@
|
||||
import Button from '@/components/Button'
|
||||
import ColorPicker from '@/components/ColorPicker'
|
||||
import Input from '@/components/Input'
|
||||
import Select from '@/components/Select'
|
||||
import { Checkbox } from '@/components/ui/checkbox'
|
||||
import { AlignRight, AlignBottom, AlignHorizontally, AlignLeft, AlignTop, AlignVertically, Link2, Add } from 'iconsax-react'
|
||||
import { FC, useState } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
|
||||
const ButtonSidebar: FC = () => {
|
||||
|
||||
const { t } = useTranslation()
|
||||
const [isBorder, setIsBorder] = useState<boolean>(false)
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className='text-lg'>{t('setting.button')}</div>
|
||||
|
||||
<div className='mt-8'>
|
||||
<Input
|
||||
label={t('setting.button_text')}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='mt-5'>
|
||||
<Input
|
||||
label={t('setting.button_link')}
|
||||
endIcon={<Link2 size={18} color='#888' />}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='mt-5'>
|
||||
<Select
|
||||
label={t('setting.size')}
|
||||
items={[]}
|
||||
placeholder={t('setting.select')}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='mt-5 flex gap-2 items-center text-sm'>
|
||||
<Checkbox
|
||||
checked={isBorder}
|
||||
onCheckedChange={() => setIsBorder(!isBorder)}
|
||||
/>
|
||||
<div>{t('setting.border')}</div>
|
||||
</div>
|
||||
|
||||
{
|
||||
isBorder &&
|
||||
<div className='mt-5'>
|
||||
<Input
|
||||
type='number'
|
||||
label={t('setting.border')}
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
|
||||
<div className='mt-5'>
|
||||
<ColorPicker
|
||||
label={t('setting.text_color')}
|
||||
changeColor={() => null}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='mt-5'>
|
||||
<ColorPicker
|
||||
label={t('setting.background_color')}
|
||||
changeColor={() => null}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='mt-5'>
|
||||
<ColorPicker
|
||||
label={t('setting.border_color')}
|
||||
changeColor={() => null}
|
||||
/>
|
||||
</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_button')}</span>
|
||||
</div>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default ButtonSidebar
|
||||
@@ -0,0 +1,61 @@
|
||||
import Button from '@/components/Button'
|
||||
import UploadBoxDraggble from '@/components/UploadBoxDraggble'
|
||||
import { Add, AlignBottom, AlignHorizontally, AlignLeft, AlignRight, AlignTop, AlignVertically } from 'iconsax-react'
|
||||
import { FC } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
|
||||
const ImageSideBar: FC = () => {
|
||||
|
||||
const { t } = useTranslation()
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className='text-lg'>{t('setting.image')}</div>
|
||||
|
||||
<div className='mt-8'>
|
||||
<UploadBoxDraggble
|
||||
label={t('setting.upload_image')}
|
||||
onChange={() => null}
|
||||
/>
|
||||
</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_image')}</span>
|
||||
</div>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default ImageSideBar
|
||||
@@ -0,0 +1,89 @@
|
||||
import { FC, useState } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import UploadBoxDraggble from '@/components/UploadBoxDraggble';
|
||||
import Select from '@/components/Select';
|
||||
import { AlignBottom, AlignHorizontally, AlignLeft, AlignRight, AlignTop, AlignVertically } from 'iconsax-react';
|
||||
import ColorPicker from '@/components/ColorPicker';
|
||||
|
||||
|
||||
const SettingSideBar: FC = () => {
|
||||
|
||||
const { t } = useTranslation()
|
||||
const [color, setColor] = useState("#aabbcc");
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className='text-lg'>{t('setting.setting')}</div>
|
||||
|
||||
<div className='flex h-[51px] gap-5 mt-6'>
|
||||
<div className='w-[102px] h-full bg-[#EAECF4]'></div>
|
||||
<div className='w-[102px] h-full flex gap-1'>
|
||||
<div className='flex-1 bg-[#EAECF4]'></div>
|
||||
<div className='flex-1 bg-[#EAECF4]'></div>
|
||||
</div>
|
||||
</div>
|
||||
<div className='flex h-[51px] gap-5 mt-5'>
|
||||
<div className='w-[102px] h-full flex gap-1'>
|
||||
<div className='flex-1 bg-[#EAECF4]'></div>
|
||||
<div className='flex-1 bg-[#EAECF4]'></div>
|
||||
<div className='flex-1 bg-[#EAECF4]'></div>
|
||||
</div>
|
||||
<div className='w-[102px] h-full flex gap-1'>
|
||||
<div className='flex-1 bg-[#EAECF4]'></div>
|
||||
<div className='flex-1 bg-[#EAECF4]'></div>
|
||||
<div className='flex-1 bg-[#EAECF4]'></div>
|
||||
<div className='flex-1 bg-[#EAECF4]'></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='mt-5'>
|
||||
<ColorPicker
|
||||
label={t('setting.background')}
|
||||
defaultColor={color}
|
||||
changeColor={setColor}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='mt-5'>
|
||||
<UploadBoxDraggble
|
||||
label={t('setting.upload_background')}
|
||||
onChange={() => null}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className='mt-5'>
|
||||
<Select
|
||||
items={[]}
|
||||
label={t('setting.size')}
|
||||
placeholder={t('setting.size')}
|
||||
/>
|
||||
</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>
|
||||
)
|
||||
}
|
||||
|
||||
export default SettingSideBar
|
||||
@@ -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
|
||||
Reference in New Issue
Block a user