dmail-front/src/components/ColorPicker.tsx

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