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,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