danak/dmail-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

setting personality

Browse Source
This commit is contained in:
hamid zarghami
2025-06-21 17:20:00 +03:30
parent 4c869c42c6
commit 037113ee09
18 changed files with 712 additions and 190 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package.json
+2
View File
@@ -21,8 +21,10 @@
"lucide-react": "^0.511.0",
"quill": "^2.0.3",
"react": "^19.0.0",
"react-colorful": "^5.6.1",
"react-date-object": "^2.1.9",
"react-dom": "^19.0.0",
"react-dropzone": "^14.3.8",
"react-i18next": "^15.5.1",
"react-loading-skeleton": "^3.5.0",
"react-multi-date-picker": "^4.5.2",
pnpm-lock.yaml
Generated
+49
View File
@@ -41,12 +41,18 @@ importers:
react:
specifier: ^19.0.0
version: 19.1.0
react-colorful:
specifier: ^5.6.1
version: 5.6.1(react-dom@19.1.0(react@19.1.0))(react@19.1.0)
react-date-object:
specifier: ^2.1.9
version: 2.1.9
react-dom:
specifier: ^19.0.0
version: 19.1.0(react@19.1.0)
react-dropzone:
specifier: ^14.3.8
version: 14.3.8(react@19.1.0)
react-i18next:
specifier: ^15.5.1
version: 15.5.2(i18next@25.2.1(typescript@5.7.3))(react-dom@19.1.0(react@19.1.0))(react@19.1.0)(typescript@5.7.3)
@@ -948,6 +954,10 @@ packages:
argparse@2.0.1:
resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
attr-accept@2.2.5:
resolution: {integrity: sha512-0bDNnY/u6pPwHDMoF0FieU354oBi0a8rD9FcsLwzcGWbc8KS8KPIi7y+s13OlVY+gMWc/9xEMUgNE6Qm8ZllYQ==}
engines: {node: '>=4'}
balanced-match@1.0.2:
resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
@@ -1219,6 +1229,10 @@ packages:
resolution: {integrity: sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==}
engines: {node: '>=16.0.0'}
file-selector@2.1.2:
resolution: {integrity: sha512-QgXo+mXTe8ljeqUFaX3QVHc5osSItJ/Km+xpocx0aSqWGMSCf6qYs/VnzZgS864Pjn5iceMRFigeAV7AfTlaig==}
engines: {node: '>= 12'}
fill-range@7.1.1:
resolution: {integrity: sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==}
engines: {node: '>=8'}
@@ -1679,6 +1693,12 @@ packages:
resolution: {integrity: sha512-xEYQBqfYx/sfb33VJiKnSJp8ehloavImQ2A6564GAbqG55PGw1dAWUn1MUbQB62t0azawUS2CZZhWCjO8gRvTw==}
engines: {npm: '>=8.2.3'}
react-colorful@5.6.1:
resolution: {integrity: sha512-1exovf0uGTGyq5mXQT0zgQ80uvj2PCwvF8zY1RN9/vbJVSjSo3fsB/4L3ObbF7u70NduSiK4xu4Y6q1MHoUGEw==}
peerDependencies:
react: '>=16.8.0'
react-dom: '>=16.8.0'
react-date-object@2.1.9:
resolution: {integrity: sha512-BHxD/quWOTo9fLKV/cfL/M31ePoj4a1JaJ/CnOf8Ndg3mrkh4x9wEMMkCfTrzduxDOgU8ZgR8uarhqI5G71sTg==}
@@ -1687,6 +1707,12 @@ packages:
peerDependencies:
react: ^19.1.0
react-dropzone@14.3.8:
resolution: {integrity: sha512-sBgODnq+lcA4P296DY4wacOZz3JFpD99fp+hb//iBO2HHnyeZU3FwWyXJ6salNpqQdsZrgMrotuko/BdJMV8Ug==}
engines: {node: '>= 10.13'}
peerDependencies:
react: '>= 16.8 || 18.0.0'
react-element-popper@2.1.7:
resolution: {integrity: sha512-tuM2OxKlW32h+6uFSK6EENHPeZ2OGgOipHfOAl+VLWEv9/j3QkSGbD+ADX3A9uJlmq24i37n28RjJmAbGTfpEg==}
peerDependencies:
@@ -1934,6 +1960,9 @@ packages:
typescript:
optional: true
tslib@2.8.1:
resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
tunnel-rat@0.1.2:
resolution: {integrity: sha512-lR5VHmkPhzdhrM092lI2nACsLO4QubF0/yoOhzX7c+wIpbN1GjHNzCc91QlpxBi+cnx8vVJ+Ur6vL5cEoQPFpQ==}
@@ -2834,6 +2863,8 @@ snapshots:
argparse@2.0.1: {}
attr-accept@2.2.5: {}
balanced-match@1.0.2: {}
base64-js@1.5.1: {}
@@ -3136,6 +3167,10 @@ snapshots:
dependencies:
flat-cache: 4.0.1
file-selector@2.1.2:
dependencies:
tslib: 2.8.1
fill-range@7.1.1:
dependencies:
to-regex-range: 5.0.1
@@ -3534,6 +3569,11 @@ snapshots:
parchment: 3.0.0
quill-delta: 5.1.0
react-colorful@5.6.1(react-dom@19.1.0(react@19.1.0))(react@19.1.0):
dependencies:
react: 19.1.0
react-dom: 19.1.0(react@19.1.0)
react-date-object@2.1.9: {}
react-dom@19.1.0(react@19.1.0):
@@ -3541,6 +3581,13 @@ snapshots:
react: 19.1.0
scheduler: 0.26.0
react-dropzone@14.3.8(react@19.1.0):
dependencies:
attr-accept: 2.2.5
file-selector: 2.1.2
prop-types: 15.8.1
react: 19.1.0
react-element-popper@2.1.7(react-dom@19.1.0(react@19.1.0))(react@19.1.0):
dependencies:
react: 19.1.0
@@ -3779,6 +3826,8 @@ snapshots:
optionalDependencies:
typescript: 5.7.3
tslib@2.8.1: {}
tunnel-rat@0.1.2(@types/react@19.1.6)(react@19.1.0):
dependencies:
zustand: 4.5.7(@types/react@19.1.6)(react@19.1.0)
src/assets/images/color.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.5 KiB

src/components/ColorPicker.tsx
+41
View File
@@ -0,0 +1,41 @@
import { FC, useState } from 'react'
import ColorImage from '@/assets/images/color.png'
import { HexColorPicker } from 'react-colorful'
type Props = {
defaultColor?: string
changeColor: (color: string) => void,
label: string
}
const ColorPicker: FC<Props> = ({ defaultColor, changeColor, label }) => {
const [showPicker, setShowPicker] = useState(false)
const [color, setColor] = useState<string>(defaultColor || '#000')
return (
<div>
<div>
{label}
</div>
<div onClick={() => setShowPicker(!showPicker)}
className='mt-2 relative cursor-pointer h-10 border border-[#D0D0D0] rounded-xl px-4 flex justify-between items-center'>
<div className='flex gap-1.5 items-center'>
<div style={{ background: color }} className='size-4 rounded-full'></div>
<div className='text-description text-sm dltr text-right'>{color}</div>
</div>
<img src={ColorImage} alt="color" className='size-6' />
{showPicker && (
<div style={{ position: "absolute", top: "50px", zIndex: 10 }}>
<HexColorPicker color={color} onChange={(newColor) => {
setColor(newColor)
changeColor(newColor)
}} />
</div>
)}
</div>
</div>
)
}
export default ColorPicker
src/components/Input.tsx
+8
View File
@@ -15,6 +15,7 @@ type Props = {
seprator?: boolean;
isNotRequired?: boolean;
onChangeSearchFinal?: (value: string) => void;
endIcon?: React.ReactNode;
} & InputHTMLAttributes<HTMLInputElement>
const formatNumber = (value: string | number): string => {
@@ -103,6 +104,13 @@ const Input: FC<Props> = (props: Props) => {
<SearchNormal size={20} color='#8C90A3' className='absolute pointer-events-none top-0 w-5 bottom-0 my-auto right-3' />
}
{
props.endIcon &&
<div className='absolute flex items-center pointer-events-none top-0 bottom-0 cursor-pointer my-auto left-3'>
{props.endIcon}
</div>
}
{
props.error_text &&
<Error
src/components/UploadBoxDraggble.tsx
+153
View File
@@ -0,0 +1,153 @@
import { CloseCircle, DocumentUpload, Gallery } from 'iconsax-react'
import { FC, useCallback, useEffect, useState } from 'react'
import { useDropzone } from 'react-dropzone';
import { useTranslation } from 'react-i18next';
import { clx } from '../helpers/utils';
type Props = {
label: string;
onChange: (file: File[]) => void;
isMultiple?: boolean;
isFile?: boolean,
preview?: string[],
onChangePreview?: (preview: string[]) => void,
getCover?: (url: string) => void,
coverUrl?: string
}
const UploadBoxDraggble: FC<Props> = (props: Props) => {
const { t } = useTranslation('global')
const [files, setFiles] = useState<File[]>([])
const [perviews, setPerviews] = useState<string[]>(props.preview ? props.preview : [])
const [isFill, setIsFill] = useState<boolean>(false)
const [cover, setCover] = useState<string>(props.coverUrl ? props.coverUrl : '')
const onDrop = useCallback((acceptedFiles: File[]) => {
if (props.isMultiple) {
const array = [...files]
array.push(acceptedFiles[0])
setFiles(array)
props.onChange(array)
} else {
setFiles([acceptedFiles[0]])
props.onChange([acceptedFiles[0]])
}
}, [files])
const { getRootProps, getInputProps } = useDropzone({ onDrop })
const handleDelete = (index: number) => {
const array = [...files]
array.splice(index, 1)
setFiles(array)
props.onChange(array)
}
const handleDeletePreview = (index: number) => {
const array = [...perviews];
array.splice(index, 1);
setPerviews(array);
if (props.onChangePreview) {
props.onChangePreview(array);
}
}
useEffect(() => {
if (props.preview && props.preview.length > 0 && !isFill) {
setPerviews(props.preview)
console.log('preview', props.preview);
setIsFill(true)
}
}, [props.preview, isFill])
useEffect(() => {
setCover(props.coverUrl ? props.coverUrl : '')
}, [props.coverUrl])
return (
<div>
<div {...getRootProps()} className='w-full py-8 border border-dashed border-description flex flex-col justify-center items-center gap-4 rounded-2xl'>
<input {...getInputProps()} />
<Gallery
className='size-8'
color='#8C90A3'
/>
<div className='text-description text-xs'>
{props.label}
</div>
<div className='flex items-center gap-2'>
<DocumentUpload
className='size-4'
color='black'
/>
<div className='text-xs'>{t('upload')}</div>
</div>
</div>
{
files.length > 0 || perviews ? (
<div className='mt-4 flex gap-4 items-center'>
{
perviews && perviews.map((item, index) => {
return (
<div key={index} className='flex items-center gap-2'>
<div key={index} className='flex relative items-center gap-2'>
<img onClick={() => {
if (props.getCover) {
setCover(item)
props.getCover(item)
}
}} src={item}
className={clx(
'size-10 rounded-full object-cover',
cover === item ? 'border-2 border-red-400' : ''
)} />
<div onClick={() => handleDeletePreview(index)} className='absolute -left-2 -top-2 shadow-md bg-white size-5 rounded-full flex justify-center items-center'>
<CloseCircle className='size-4 ' color='red' />
</div>
</div>
</div>
)
})
}
{
files.map((file, index) => {
if (props.isFile) {
return (
<div key={index} className='flex border p-2 rounded-lg items-center gap-2'>
<div className='flex relative items-center gap-2'>
<div className='text-xs'>{file.name}</div>
<div className='absolute -left-4 -top-4 shadow-md bg-white size-5 rounded-full flex justify-center items-center'>
<CloseCircle onClick={() => handleDelete(index)} className='size-4 ' color='red' />
</div>
</div>
</div>
)
}
else
return (
<div key={index} className='flex items-center gap-2'>
<div key={index} className='flex relative items-center gap-2'>
<img src={URL.createObjectURL(file)} alt={file.name} className='size-10 rounded-full object-cover' />
<div className='absolute -left-2 -top-2 shadow-md bg-white size-5 rounded-full flex justify-center items-center'>
<CloseCircle onClick={() => handleDelete(index)} className='size-4 ' color='red' />
</div>
</div>
</div>
)
})
}
</div>
) : null
}
</div>
)
}
export default UploadBoxDraggble
src/components/newMessage/NewMessage.tsx
+32 -11
View File
@@ -5,6 +5,7 @@ import { useSharedStore } from '@/shared/store/sharedStore'
import Input from '../Input'
import ReactQuill from 'react-quill-new';
import Button from '../Button'
import Select from '../Select'
const NewMessage: FC = () => {
@@ -17,10 +18,10 @@ const NewMessage: FC = () => {
{openNewMessage && (
<>
<div
className='fixed inset-0 bg-black/50 z-[9998]'
className='fixed inset-0 xl:bg-transparent bg-black/50 z-[9998]'
onClick={() => setOpenNewMessage(false)}
/>
<div className='fixed left-2 right-2 bottom-2 md:left-4 md:right-4 md:bottom-4 md:top-4 xl:left-8 xl:right-auto xl:bottom-4 xl:top-4 bg-white rounded-2xl md:rounded-3xl shadow-[0_0_20px_rgba(0,0,0,0.1)] z-[9999] transition-all duration-300 p-4 md:p-6 xl:p-8 w-auto xl:w-[800px] max-h-[90vh] overflow-y-auto'>
<div className='fixed left-2 right-2 bottom-2 md:left-4 md:right-4 md:bottom-4 xl:left-8 xl:right-auto xl:bottom-4 bg-white rounded-2xl md:rounded-3xl shadow-[0_0_20px_rgba(0,0,0,0.1)] z-[9999] transition-all duration-300 p-4 md:p-6 xl:p-8 w-auto xl:w-[800px] max-h-[90vh] overflow-y-auto'>
{/* Header */}
<div className='flex justify-between items-center mb-6 md:mb-8'>
<div className='text-lg md:text-xl xl:text-2xl font-semibold'>
@@ -61,15 +62,35 @@ const NewMessage: FC = () => {
/>
</div>
<div className='flex flex-col sm:flex-row justify-end gap-3 md:gap-4 pt-4'>
<Button
className='!w-full sm:!w-fit px-6 md:px-10 bg-white text-black border border-primary order-2 sm:order-1'
label={t('new_message.draft')}
/>
<Button
className='w-full sm:w-fit px-6 md:px-10 order-1 sm:order-2'
label={t('new_message.send')}
/>
<div className='flex flex-wrap gap-2.5 items-center'>
<div className='bg-[#EBEDF5] text-sm flex gap-2 h-10 rounded-full items-center px-4'>
<span>Lorem Ipsum.pdf</span>
<CloseCircle size={20} color='#D52903' />
</div>
<div className='bg-[#EBEDF5] text-sm flex gap-2 h-10 rounded-full items-center px-4'>
<span>Lorem Ipsum.pdf</span>
<CloseCircle size={20} color='#D52903' />
</div>
</div>
<div className='flex flex-col gap-4 sm:flex-row pt-4'>
<div>
<Select
items={[]}
placeholder={t('new_message.select_priority')}
className='xl:w-[190px]'
/>
</div>
<div className='flex-1 justify-end flex gap-3'>
<Button
className='!w-full sm:!w-fit px-6 md:px-10 bg-white text-black border border-primary order-2 sm:order-1'
label={t('new_message.draft')}
/>
<Button
className='w-full sm:w-fit px-6 md:px-10 order-1 sm:order-2'
label={t('new_message.send')}
/>
</div>
</div>
</div>
</div>
src/index.css
+4
View File
@@ -209,3 +209,7 @@ textarea::placeholder {
.ql-editor {
@apply !text-right;
}
.dltr {
direction: ltr;
}
src/langs/fa.json
+24 -2
View File
@@ -64,8 +64,29 @@
"personality": "شخصی سازی",
"mail_server": "تنظیمات میل سرور",
"domain": "تنظیمات دامنه",
"address": "نشانی ها"
"address": "نشانی ها",
"setting": "تنظیمات",
"background": "رنگ زمینه",
"upload_background": "تصویر پس زمینه مورد نظر را آپلود کنید",
"size": "سایز",
"horizontal_position": "موقعیت افقی",
"vertical_position": "موقعیت عمودی",
"text": "متن",
"add_text": "اضافه کردن متن",
"button": "دکمه",
"button_text": "متن دکمه",
"button_link": "لینک",
"select": "انتخاب",
"border": "حاشیه",
"text_color": "رنگ متن",
"background_color": "رنگ زمینه",
"border_color": "رنگ حاشیه",
"add_button": "اضافه کردن دکمه",
"image": "تصویر",
"upload_image": "تصویر مورد نظر را آپلود کنید",
"add_image": "اضافه کردن تصویر"
},
"upload": "آپلود",
"new_message": {
"title": "ارسال پیام جدید",
"to": "ارسال به",
@@ -75,6 +96,7 @@
"draft": "پیش نویس",
"recipients_placeholder": "نام گیرنده",
"subject_placeholder": "موضوع پیام",
"message_placeholder": "متن پیام"
"message_placeholder": "متن پیام",
"select_priority": "انتخاب اولویت"
}
}
src/pages/setting/Setting.tsx
+1 -1
View File
@@ -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()
src/pages/setting/enum/SettingEnum.ts
+7
View File
@@ -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",
}
src/pages/setting/personality/Setting.tsx
-162
View File
@@ -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
src/pages/setting/personality/SideBar.tsx
+41
View File
@@ -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
src/pages/setting/personality/components/ButtonSidebar.tsx
+119
View File
@@ -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
src/pages/setting/personality/components/ImageSideBar.tsx
+61
View File
@@ -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
src/pages/setting/personality/components/SettingSideBar.tsx
+89
View File
@@ -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
src/pages/setting/personality/components/TextSidebar.tsx
+76
View File
@@ -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
src/shared/SideBarItem.tsx
+5 -14
View File
@@ -2,6 +2,7 @@ import { FC, ReactNode } from 'react'
import { Link } from 'react-router-dom'
import { clx } from '../helpers/utils'
type Props = {
icon: ReactNode,
title: string,
@@ -13,28 +14,18 @@ type Props = {
const SideBarItem: FC<Props> = (props: Props) => {
const handleLogout = async () => {
// await logout.mutateAsync()
// removeToken()
// removeRefreshToken()
// window.location.href = Pages.auth.login
}
return (
<Link onClick={props.isLogout ? handleLogout : undefined} to={props.link} className='flex text-xs gap-6 md:gap-8 xl:gap-9 mt-3 md:mt-4 px-2 md:px-0'>
<Link to={props.link} className='flex text-xs gap-9 mt-4'>
{
!props.isWithoutLine &&
<div className={clx(
'w-1 bg-black h-5 md:h-6',
'w-1 bg-black h-6',
!props.isActive && 'invisible'
)}></div>
}
<div className='flex gap-2 md:gap-2.5 items-center'>
<div className='flex gap-3 items-center'>
{props.icon}
<div className={clx(
'text-xs md:text-sm',
props.isActive ? 'text-black font-medium' : ''
)}>
<div className={props.isActive ? 'text-black' : ''}>
{props.title}
</div>
</div>