64 lines
2.8 KiB
React
64 lines
2.8 KiB
React
|
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
|