64 lines
2.8 KiB
JavaScript
64 lines
2.8 KiB
JavaScript
import { PROJECT_COLORS_PALETTE } from '../utils/projectUtils'
|
||
import './Integrations.css'
|
||
|
||
function ColorPickerModal({ onClose, onColorSelect, currentColor }) {
|
||
const handleColorClick = (color) => {
|
||
onColorSelect(color)
|
||
onClose()
|
||
}
|
||
|
||
return (
|
||
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50" onClick={onClose}>
|
||
<div className="bg-white rounded-lg max-w-md w-90 shadow-lg max-h-[90vh] flex flex-col" onClick={(e) => e.stopPropagation()}>
|
||
{/* Заголовок с кнопкой закрытия */}
|
||
<div className="flex justify-between items-center p-4 border-b border-gray-200">
|
||
<h3 className="text-lg font-semibold text-gray-800">Выберите цвет проекта</h3>
|
||
<button
|
||
onClick={onClose}
|
||
className="flex items-center justify-center w-10 h-10 rounded-full bg-white hover:bg-gray-100 text-gray-600 hover:text-gray-800 border border-gray-200 hover:border-gray-300 transition-all duration-200 shadow-sm hover:shadow-md"
|
||
title="Закрыть"
|
||
>
|
||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||
<line x1="18" y1="6" x2="6" y2="18"></line>
|
||
<line x1="6" y1="6" x2="18" y2="18"></line>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
|
||
{/* Контент - сетка цветов */}
|
||
<div className="flex-1 overflow-y-auto p-6">
|
||
<div className="grid grid-cols-6 gap-3">
|
||
{PROJECT_COLORS_PALETTE.map((color, index) => (
|
||
<button
|
||
key={index}
|
||
onClick={() => handleColorClick(color)}
|
||
className={`
|
||
w-12 h-12 rounded-full
|
||
border-2 transition-all duration-200
|
||
hover:scale-110 hover:shadow-lg
|
||
${currentColor === color
|
||
? 'border-gray-800 shadow-md ring-2 ring-offset-2 ring-gray-400'
|
||
: 'border-gray-300 hover:border-gray-500'
|
||
}
|
||
`}
|
||
style={{ backgroundColor: color }}
|
||
title={color}
|
||
>
|
||
{currentColor === color && (
|
||
<div className="flex items-center justify-center h-full">
|
||
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="white" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
|
||
<polyline points="20 6 9 17 4 12"></polyline>
|
||
</svg>
|
||
</div>
|
||
)}
|
||
</button>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export default ColorPickerModal
|