Первоначальный коммит

Co-authored-by: Cursor <cursoragent@cursor.com>

play-life-web/src/components/ColorPickerModal.jsx

@@ -0,0 +1,63 @@
+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