function MainComponent() { const [bearColor, setBearColor] = React.useState('#a52a2a'); const [bearName, setBearName] = React.useState('Teddy'); const bearColorOptions = []; let bearImageSrc = ''; // ... same as before let bearImageAlt = `Teddy bear with ${bearColorOptions.find((option)=>option.value === bearColor)?.label} coloring`; const saveImage = ()=>{ const canvas = document.createElement('canvas'); canvas.width = 300; canvas.height = 300; const ctx = canvas.getContext('2d'); const image = new Image(); image.onload = ()=>{ ctx.drawImage(image, 0, 0, canvas.width, canvas.height); const a = document.createElement('a'); a.download = `${bearName}.png`; a.href = canvas.toDataURL('image/png'); a.click(); }; image.src = bearImageSrc; image.alt = bearImageAlt; }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col space-y-8 items-center p-8 bg-[#F0EAD6] min-h-screen font-roboto", __source: { fileName: "", lineNumber: 32, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl text-[#5a3e36]", __source: { fileName: "", lineNumber: 33, columnNumber: 7 }, __self: this }, "Teddy Bear Image Maker"), /*#__PURE__*/ React.createElement("div", { className: "flex space-x-4 justify-center", __source: { fileName: "", lineNumber: 35, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("label", { __source: { fileName: "", lineNumber: 36, columnNumber: 9 }, __self: this }, "Bear Color:", /*#__PURE__*/ React.createElement("select", { name: "bearColor", value: bearColor, onChange: (e)=>setBearColor(e.target.value), className: "ml-2 w-32 h-8 cursor-pointer rounded border border-gray-300 bg-white", __source: { fileName: "", lineNumber: 38, columnNumber: 11 }, __self: this }, bearColorOptions.map((option)=>/*#__PURE__*/ React.createElement("option", { key: option.value, value: option.value, __source: { fileName: "", lineNumber: 45, columnNumber: 15 }, __self: this }, option.label))))), /*#__PURE__*/ React.createElement("input", { type: "text", name: "bearName", value: bearName, onChange: (e)=>setBearName(e.target.value), className: "w-64 h-8 p-2 rounded border border-gray-300 bg-white", placeholder: "Bear Name", __source: { fileName: "", lineNumber: 53, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "relative", __source: { fileName: "", lineNumber: 62, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-center items-center h-[300px] w-[300px] rounded-full shadow-lg relative overflow-hidden", style: { backgroundColor: bearColor }, __source: { fileName: "", lineNumber: 63, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("img", { src: bearImageSrc, alt: bearImageAlt, className: "w-full h-full object-cover", __source: { fileName: "", lineNumber: 67, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("h3", { className: "absolute bottom-0 w-full text-center text-lg text-[#5a3e36] py-2 bg-white bg-opacity-70", __source: { fileName: "", lineNumber: 69, columnNumber: 9 }, __self: this }, bearName)), /*#__PURE__*/ React.createElement("button", { type: "button", onClick: saveImage, className: "px-4 py-2 rounded bg-blue-600 text-white font-roboto transition duration-300 ease-in-out hover:bg-blue-700 focus:outline-none", __source: { fileName: "", lineNumber: 74, columnNumber: 7 }, __self: this }, "Save Image")); }