function MainComponent() { const [characterName, setCharacterName] = React.useState(''); const [gender, setGender] = React.useState(''); const [hairColor, setHairColor] = React.useState('#000000'); const [eyeColor, setEyeColor] = React.useState('#000000'); const [shirtColor, setShirtColor] = React.useState('#FFFFFF'); const handleNameChange = (event)=>{ setCharacterName(event.target.value); }; const handleGenderChange = (event)=>{ setGender(event.target.value); }; const handleHairColorChange = (event)=>{ setHairColor(event.target.value); }; const handleEyeColorChange = (event)=>{ setEyeColor(event.target.value); }; const handleShirtColorChange = (event)=>{ setShirtColor(event.target.value); }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-[#f0f0f0] p-4", __source: { fileName: "", lineNumber: 29, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-md p-5 bg-white rounded-lg shadow-md", __source: { fileName: "", lineNumber: 30, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-lg font-bold text-center text-[#333] font-roboto", __source: { fileName: "", lineNumber: 31, columnNumber: 9 }, __self: this }, "Character Customization"), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 32, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "name", className: "block font-roboto", __source: { fileName: "", lineNumber: 33, columnNumber: 11 }, __self: this }, "Name"), /*#__PURE__*/ React.createElement("input", { type: "text", name: "name", id: "name", value: characterName, onChange: handleNameChange, className: "w-full px-4 py-2 mt-2 border rounded-md focus:outline-none focus:ring-1 focus:ring-[#555] font-roboto", __source: { fileName: "", lineNumber: 34, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 43, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "block font-roboto", __source: { fileName: "", lineNumber: 44, columnNumber: 11 }, __self: this }, "Gender"), /*#__PURE__*/ React.createElement("div", { className: "flex gap-2 mt-2", __source: { fileName: "", lineNumber: 45, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { name: "gender", value: "male", onClick: handleGenderChange, className: `w-1/2 px-4 py-2 text-white rounded-md focus:outline-none font-roboto ${gender === "male" ? "bg-[#3498db]" : "bg-[#555]"}`, __source: { fileName: "", lineNumber: 46, columnNumber: 13 }, __self: this }, "Male"), /*#__PURE__*/ React.createElement("button", { name: "gender", value: "female", onClick: handleGenderChange, className: `w-1/2 px-4 py-2 text-white rounded-md focus:outline-none font-roboto ${gender === "female" ? "bg-[#e74c3c]" : "bg-[#555]"}`, __source: { fileName: "", lineNumber: 54, columnNumber: 13 }, __self: this }, "Female"))), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 64, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "hairColor", className: "block font-roboto", __source: { fileName: "", lineNumber: 65, columnNumber: 11 }, __self: this }, "Hair Color"), /*#__PURE__*/ React.createElement("input", { type: "color", name: "hairColor", id: "hairColor", value: hairColor, onChange: handleHairColorChange, className: "w-full h-10 border-none cursor-pointer", __source: { fileName: "", lineNumber: 66, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 75, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "eyeColor", className: "block font-roboto", __source: { fileName: "", lineNumber: 76, columnNumber: 11 }, __self: this }, "Eye Color"), /*#__PURE__*/ React.createElement("input", { type: "color", name: "eyeColor", id: "eyeColor", value: eyeColor, onChange: handleEyeColorChange, className: "w-full h-10 border-none cursor-pointer", __source: { fileName: "", lineNumber: 77, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mt-4", __source: { fileName: "", lineNumber: 86, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "shirtColor", className: "block font-roboto", __source: { fileName: "", lineNumber: 87, columnNumber: 11 }, __self: this }, "Shirt Color"), /*#__PURE__*/ React.createElement("input", { type: "color", name: "shirtColor", id: "shirtColor", value: shirtColor, onChange: handleShirtColorChange, className: "w-full h-10 border-none cursor-pointer", __source: { fileName: "", lineNumber: 88, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-md mt-10", __source: { fileName: "", lineNumber: 98, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `w-24 h-24 rounded-full mx-auto border-4 border-[#333] bg-[${hairColor}]`, __source: { fileName: "", lineNumber: 99, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: `w-12 h-12 rounded-full mx-auto mt-[-2rem] relative bg-[${eyeColor}]`, __source: { fileName: "", lineNumber: 100, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: `w-32 h-32 bg-[${shirtColor}] rounded-lg mx-auto mt-[-4rem]`, __source: { fileName: "", lineNumber: 101, columnNumber: 9 }, __self: this }))); }