function MainComponent() { const [colors, setColors] = React.useState([ { hex: '#E4F5FF', name: 'Dreamy Cotton Candy' }, { hex: '#FDEEF4', name: 'Baby Pink' }, { hex: '#FDEAB9', name: 'Fluffy Tutu' }, { hex: '#FCFDFF', name: 'Fairy Tale' }, { hex: '#FCAF5F1', name: 'Bubble Gum' }, { hex: '#FE46A5', name: 'Princess Parade' }, { hex: '#FF5EA1', name: 'Dream House Pink' }, { hex: '#F99CC', name: 'Barbie Pink' }, { hex: '#FF3EB5', name: 'Signature Scarf' }, { hex: '#D3E0EA', name: 'Sky Blue' }, { hex: '#67A2B2', name: 'Glam Gown Blue' }, { hex: '#326791', name: 'Dream Car Blue' }, { hex: '#00FF55', name: 'Midnight Magic' }, { hex: '#00022E', name: 'Stylish Stilettos' } ]); const [newColorHex, setNewColorHex] = React.useState('#000000'); const [newColorName, setNewColorName] = React.useState(''); const handleAddColor = ()=>{ setColors([ ...colors, { hex: newColorHex, name: newColorName } ]); setNewColorName(''); setNewColorHex('#000000'); }; const handleDeleteColor = (index)=>{ const updatedColors = colors.filter((_, colorIndex)=>colorIndex !== index); setColors(updatedColors); }; const handleHexChange = (event, index)=>{ const updatedColors = colors.map((color, colorIndex)=>colorIndex === index ? { ...color, hex: event.target.value } : color); setColors(updatedColors); }; const handleNameChange = (event, index)=>{ const updatedColors = colors.map((color, colorIndex)=>colorIndex === index ? { ...color, name: event.target.value } : color); setColors(updatedColors); }; const colorList = colors.map((color, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "flex items-center justify-between mt-2", __source: { fileName: "", lineNumber: 49, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-2", __source: { fileName: "", lineNumber: 50, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "color", value: color.hex, onChange: (event)=>handleHexChange(event, index), className: "w-10 h-10 p-0 border-none rounded shadow-sm cursor-pointer focus:ring-2 focus:ring-blue-300", __source: { fileName: "", lineNumber: 51, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", value: color.hex, readOnly: true, className: "w-16 font-mono text-sm bg-gray-200 rounded px-2 py-1 text-center", __source: { fileName: "", lineNumber: 57, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", name: `colorName-${index}`, value: color.name, onChange: (event)=>handleNameChange(event, index), placeholder: "Color Name", className: "w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-1 focus:ring-blue-500", __source: { fileName: "", lineNumber: 63, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-4", __source: { fileName: "", lineNumber: 72, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>handleDeleteColor(index), __source: { fileName: "", lineNumber: 73, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("span", { role: "img", "aria-label": "delete", __source: { fileName: "", lineNumber: 74, columnNumber: 11 }, __self: this }, "❌")), /*#__PURE__*/ React.createElement("button", { __source: { fileName: "", lineNumber: 78, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("span", { role: "img", "aria-label": "move up", __source: { fileName: "", lineNumber: 79, columnNumber: 11 }, __self: this }, "⬆️")), /*#__PURE__*/ React.createElement("button", { __source: { fileName: "", lineNumber: 83, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("span", { role: "img", "aria-label": "move down", __source: { fileName: "", lineNumber: 84, columnNumber: 11 }, __self: this }, "⬇️"))))); return /*#__PURE__*/ React.createElement("div", { className: "font-roboto bg-[#F3F4F6] p-10", __source: { fileName: "", lineNumber: 93, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "overflow-x-auto", __source: { fileName: "", lineNumber: 94, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 95, columnNumber: 9 }, __self: this }, colorList)), /*#__PURE__*/ React.createElement("div", { className: "mt-4 space-y-2", __source: { fileName: "", lineNumber: 99, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "color", value: newColorHex, onChange: (event)=>setNewColorHex(event.target.value), className: "w-12 h-12 p-0 border-none rounded shadow-sm cursor-pointer focus:ring-2 focus:ring-blue-300", __source: { fileName: "", lineNumber: 100, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("input", { type: "text", name: "newColorName", value: newColorName, onChange: (event)=>setNewColorName(event.target.value), placeholder: "New Color Name", className: "w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-1 focus:ring-blue-500", __source: { fileName: "", lineNumber: 106, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: handleAddColor, className: "px-6 py-2 bg-blue-600 text-white text-sm font-medium rounded-md hover:bg-blue-700", __source: { fileName: "", lineNumber: 114, columnNumber: 9 }, __self: this }, "Add Color"))); }