From 037113ee094fb2519a29212a4d60bd1169a244ee Mon Sep 17 00:00:00 2001 From: hamid zarghami Date: Sat, 21 Jun 2025 17:20:00 +0330 Subject: [PATCH] setting personality --- package.json | 2 + pnpm-lock.yaml | 49 ++++++ src/assets/images/color.png | Bin 0 -> 6687 bytes src/components/ColorPicker.tsx | 41 +++++ src/components/Input.tsx | 8 + src/components/UploadBoxDraggble.tsx | 153 +++++++++++++++++ src/components/newMessage/NewMessage.tsx | 43 +++-- src/index.css | 4 + src/langs/fa.json | 26 ++- src/pages/setting/Setting.tsx | 2 +- src/pages/setting/enum/SettingEnum.ts | 7 + src/pages/setting/personality/Setting.tsx | 162 ------------------ src/pages/setting/personality/SideBar.tsx | 41 +++++ .../personality/components/ButtonSidebar.tsx | 119 +++++++++++++ .../personality/components/ImageSideBar.tsx | 61 +++++++ .../personality/components/SettingSideBar.tsx | 89 ++++++++++ .../personality/components/TextSidebar.tsx | 76 ++++++++ src/shared/SideBarItem.tsx | 19 +- 18 files changed, 712 insertions(+), 190 deletions(-) create mode 100644 src/assets/images/color.png create mode 100644 src/components/ColorPicker.tsx create mode 100644 src/components/UploadBoxDraggble.tsx delete mode 100644 src/pages/setting/personality/Setting.tsx create mode 100644 src/pages/setting/personality/SideBar.tsx create mode 100644 src/pages/setting/personality/components/ButtonSidebar.tsx create mode 100644 src/pages/setting/personality/components/ImageSideBar.tsx create mode 100644 src/pages/setting/personality/components/SettingSideBar.tsx create mode 100644 src/pages/setting/personality/components/TextSidebar.tsx diff --git a/package.json b/package.json index a6387f3..55dd0e9 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 214fbe4..74c6b06 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -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) diff --git a/src/assets/images/color.png b/src/assets/images/color.png new file mode 100644 index 0000000000000000000000000000000000000000..3560bcfe4815425b2b7d1e7c99b11acab501d218 GIT binary patch literal 6687 zcmZ`;Wmgmoqa>tb>F(}O9*|sEy1Rs>yCs$eLAtvemQLwVI+iX)TDq5RgzNnQ?}wQ= zGk;*tnTgg=lgGiNz(hbmz)@6?(fX&Z|KNs>`j7Esd3gQ_hMR(+2Lb~9$NvYSYzDvC zzYx(wOCE$!KTUP?&%CphQk6nLXiCI-F-Ji_Aa7BWk<#%&JOg9684qW_c5nW7A1C*X z3ziw+zB(c}65WZ^t!5yIm*UkFCb?&(ofKwFNmmRScLFh&nJIotQpzx9YK6hOIFx@o zVPjx)lWmfWJhWLgTCdN?*~oc(FYRuBj<=dM{uYt zj-dD-6e@WE|4R0O@_tEfVw_|%$8m5g0OXofNjy#XQ=fM<&Bl31$9k-qj1^ge@ovC| zY@-dwJvDHn8}XdvYGlM-9scy3G3n6x@!|)w{^GjedC4qC?KVq;>6O)j)hTz8HgWyk z`B#z|dW0Bt?b0h#l6lp9ulpWkXV=rP%oW^ZAn=taFYD0wXPg5IApUhW*VUv9e5Ie9 zn^9Z!e6?*o*IKS72J66m{A`tvlh5Jib-~Al1G!NDc>kUph<#a+UHEo;6>P<)*49jo zcHc+1nwX?YDTuJ=I#|kDsl-r|+@nnhIWN_(?b(8dtIuRZjTbgcOO02EklPLdzX7u2 zdNBHiva3k(a2ca+``R*1BuyWF+fIQ?EeVP=WGh*&MijnA2KVg$FoN6vRbwcR+(!0| zz%2C?_{A_rnHbshJ&O>B_4QVY=v@>``8&&bE#Z$ylmm3Uqbdf@U# z_VjCt{bRN<6SVn8{<~K{IVQ}*wM+!;$AFC`?dWxRVgm9W1`QM}-Bf ze#<%7I*@;zeGmyA55*)jV80r=RdT!60*G7=V`G;!M3haR>oFD5poieya9Yb)g_$)s`HW(!KOcUmsJ?BbV=X)AYAPt2vf z>47d2fuRGfL2qsU9p=OW`unp`FeMrySti$`TPQY?^|ZBGvn2SX|GKB(u$hNV16g!I zDI4a7j`f)U_^aCbC$=$1!-MubS`#`rthbW{EaZws6`Q+uUa-hwmfjaJUAa=N>A1pZ z&i@zDB6*3C<4yEvwUavS)|<<5&wp{s|HrzUc%GV1CdwYej9&V9Dy?z2%cq-Qw>V`g zRBH~jn3^fg-RGksAo0)wS0LsR3R)n$O^9nXHab%LPDba;_xT!sT7W6WIp~V1<9x*C z1Q`oL!h|b)HNceJXnGTlM4!EX=oyZ?U5h!fAQXzY>s5}-6jXYg*9R5yTMfDwHYH4B z&*DY%T{GqnrRk`}!o^WF+#ZqcC^oP;E(IqCd;n0Fhl>MeV$X1G`lS~wTxbpPd=^_= z{@PVO1D96Sg$p8Ke*}F&1LzL^f8J5W7||7%?9ha_R6#7v=6^th;PwO59T2l2EGew6yDDFPYW+;Chh7>^hs0g(JOyzA_^r#`ck$~eaT#c zT^St>Zxkhk3oIeQK}|BtBO#JeHPc+|nWw}9M_kJ%fUDgP9nnoJWVMF1%-he40M~3I zG#&-hs@-K`H_zv@-pDq*zCZ4oZ7QKwUvimNioXu*%6FaIEK{&2!gq@imq`SY3OVXG zf>f;Hok-~v?*+>}f^qxAYhHLmu;%qed`(|Z3D8mNk-~GCLI-Di8PEr@cErYENDT1g zG3m&5f`YNjp1iR4U&@(Gj21zY!?n0656%^Hc|Y-^jk+uX0 zS`z^2OgZz57^dDRq6T1QnG$n&V@3B#&lJZ`Fa~u%TqG(z?Nz!>XwtwLg$3hH9Xb1T zU4%$bU696D7$cE>1K{ZNZts;=5@TMU%lGcIS()VZZ`n1gLfTcHv@nu5=ij6(&QtS^ zjA;f1qG>Ft$!i%`Ho|meB5MG0S7anA!L=m5SsNBiw`_FWD8KmQ^3MTR6!uA4brBv3 zZm0f$x2IcXosHPc9@hZ4jmyc9Z^a!sWJg{vG(hLK^t(p|Y@)dxw1kjOiWLE}U8u7H zDYXbXwTfm0{60J{0@bn}*zTCdEGGTymmzvYfaXQ^d|EmpvI;@@3vAVn)aF!NSd z+~}iH&EfnESj-AW9vL*T0vF?7A#LDXOoi!^B`$yjrfl__#Te%eyWp=n4wzMp0p1(} zwlPgeacm@F?onub-nPyaNYnol*7-yYti)5zSZ&tjzilP~$@j!<+?Lc13Wl!JyV;H; z2eYlsrcNzgA-u z*)^o$q)|7=30C@i6n(Qu5|!W5G^EpUpmPUIKRR6Zpn08`Mjb|(t2ZOAq#I@J9?0Cv zEL?St>W7(~8wZs6bR~+Uy=|tXWs?@Afn9xXKZnCEq0fK6@?H|3P3h`)O8Ci_jx`#q zRcYn0MjA2`qVU%}ayXW%13-3SDA9l5)h~RP)j6B&%&)vV^c5={^^W3wJ+834;z@it zw)iK~J(pfIreg|wOT6WXVGrqcNqjf84L|sbU%IcgV@;E8RX!z-)aEz5A)f7OowAi$ z3`L@1EYK<0ervFFo&2G@ z;4D+_j3O%Smn5ByOCi)<*Km|}$2}9zIqQp2kJr?nS^Ljw1#uan_ENHZHUMZI(ou#V z4J`rR-$AjT5V@nOS!d@hG|`jaNawx*q;t1D+5T*{;ixFxBhHcq6)kP;S+$%7iQ)tG zb1@e-iBg`G9LMf%K60bGTb#ULlqzf;BFid4D?j?SGF;S*csC3Ak<5Z2U2mJ8vnPy% zo<>-YN2#e!3K*rIixD}}9OP=he~=psiC_bu^w6coBnzSro+K2vQxNS#Z^Jv)D`_-4=47?2&;7 znsfe}+TVBN;>ZKO(I`GKj3P>$;S$-6&t3h*7whkDAwl@xcz@i!u_U+Qt z7w23))1l-QpNa-;a!_;qNALULH1m70q-2ROM_h5(X}zuSXzXxA8XlCwkAW(`Qs)D> z(VqoJ3xKOBlQ$Zm;oLZ(QgY*I7=~+{AyX|yb9QUQjsN;$l77I;4Z0I58~ZWB$NJI( z%{h9vLxD^+;A>esBHmPO^!Fp`9Ox^folkbFP%0DJ@~?!Ex?5GNkF{S$Z%V%4>SCSt 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 void, + label: string +} + +const ColorPicker: FC = ({ defaultColor, changeColor, label }) => { + + const [showPicker, setShowPicker] = useState(false) + const [color, setColor] = useState(defaultColor || '#000') + + return ( +
+
+ {label} +
+
setShowPicker(!showPicker)} + className='mt-2 relative cursor-pointer h-10 border border-[#D0D0D0] rounded-xl px-4 flex justify-between items-center'> +
+
+
{color}
+
+ color + {showPicker && ( +
+ { + setColor(newColor) + changeColor(newColor) + }} /> +
+ )} +
+
+ ) +} + +export default ColorPicker \ No newline at end of file diff --git a/src/components/Input.tsx b/src/components/Input.tsx index b20c24d..de90b15 100644 --- a/src/components/Input.tsx +++ b/src/components/Input.tsx @@ -15,6 +15,7 @@ type Props = { seprator?: boolean; isNotRequired?: boolean; onChangeSearchFinal?: (value: string) => void; + endIcon?: React.ReactNode; } & InputHTMLAttributes const formatNumber = (value: string | number): string => { @@ -103,6 +104,13 @@ const Input: FC = (props: Props) => { } + { + props.endIcon && +
+ {props.endIcon} +
+ } + { props.error_text && void; + isMultiple?: boolean; + isFile?: boolean, + preview?: string[], + onChangePreview?: (preview: string[]) => void, + getCover?: (url: string) => void, + coverUrl?: string +} + +const UploadBoxDraggble: FC = (props: Props) => { + + const { t } = useTranslation('global') + const [files, setFiles] = useState([]) + const [perviews, setPerviews] = useState(props.preview ? props.preview : []) + const [isFill, setIsFill] = useState(false) + const [cover, setCover] = useState(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 ( +
+
+ + +
+ {props.label} +
+ +
+ +
{t('upload')}
+
+
+ + { + files.length > 0 || perviews ? ( +
+ { + perviews && perviews.map((item, index) => { + return ( +
+
+ { + 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' : '' + )} /> +
handleDeletePreview(index)} className='absolute -left-2 -top-2 shadow-md bg-white size-5 rounded-full flex justify-center items-center'> + +
+
+
+ ) + }) + } + { + files.map((file, index) => { + if (props.isFile) { + return ( +
+
+
{file.name}
+
+ handleDelete(index)} className='size-4 ' color='red' /> +
+
+
+ ) + } + else + return ( +
+
+ {file.name} +
+ handleDelete(index)} className='size-4 ' color='red' /> +
+
+
+ ) + }) + } +
+ ) : null + } + +
+ ) +} + +export default UploadBoxDraggble \ No newline at end of file diff --git a/src/components/newMessage/NewMessage.tsx b/src/components/newMessage/NewMessage.tsx index 71a74ad..4e9d21e 100644 --- a/src/components/newMessage/NewMessage.tsx +++ b/src/components/newMessage/NewMessage.tsx @@ -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 && ( <>
setOpenNewMessage(false)} /> -
+
{/* Header */}
@@ -61,15 +62,35 @@ const NewMessage: FC = () => { />
-
- +
+ +
+ ) +} + +export default ButtonSidebar \ No newline at end of file diff --git a/src/pages/setting/personality/components/ImageSideBar.tsx b/src/pages/setting/personality/components/ImageSideBar.tsx new file mode 100644 index 0000000..20c8565 --- /dev/null +++ b/src/pages/setting/personality/components/ImageSideBar.tsx @@ -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 ( +
+
{t('setting.image')}
+ +
+ null} + /> +
+ +
+
+
+ {t('setting.horizontal_position')} +
+
+ + + +
+
+ +
+
+ {t('setting.horizontal_position')} +
+
+ + + +
+
+
+ +
+ +
+
+ ) +} + +export default ImageSideBar \ No newline at end of file diff --git a/src/pages/setting/personality/components/SettingSideBar.tsx b/src/pages/setting/personality/components/SettingSideBar.tsx new file mode 100644 index 0000000..2a0c9f4 --- /dev/null +++ b/src/pages/setting/personality/components/SettingSideBar.tsx @@ -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 ( +
+
{t('setting.setting')}
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+ +
+ +
+ null} + /> +
+ +
+