function MainComponent() { const accessoryOptions = { hair: [ "Short", "Curly", "Bald" ], mustache: [ "Full", "Trimmed", "None" ], clothes: [ "Casual", "Formal", "Sporty" ], glasses: [ "Round", "Square", "None" ], eyes: [ "Blue", "Brown", "Green" ], nose: [ "Small", "Medium", "Large" ], mouth: [ "Smiling", "Frowning", "Neutral" ] }; const handleSubmit = (e)=>{ e.preventDefault(); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen flex items-center justify-center bg-[#f0e6f6]", __source: { fileName: "", lineNumber: 17, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-4xl p-8 bg-white rounded-lg shadow-md", __source: { fileName: "", lineNumber: 18, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "mb-6 text-4xl font-bold text-center text-[#121212] font-crimson-text", __source: { fileName: "", lineNumber: 19, columnNumber: 9 }, __self: this }, "3D Avatar Maker 🎨"), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "space-y-6", __source: { fileName: "", lineNumber: 20, columnNumber: 9 }, __self: this }, Object.entries(accessoryOptions).map(([key, values])=>/*#__PURE__*/ React.createElement("div", { key: key, __source: { fileName: "", lineNumber: 22, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: key, className: "block text-sm font-semibold text-[#121212]", __source: { fileName: "", lineNumber: 23, columnNumber: 15 }, __self: this }, key.charAt(0).toUpperCase() + key.slice(1)), /*#__PURE__*/ React.createElement("select", { name: key, id: key, className: "w-full mt-1 p-2 border border-gray-300 rounded-md font-roboto", __source: { fileName: "", lineNumber: 29, columnNumber: 15 }, __self: this }, values.map((value)=>/*#__PURE__*/ React.createElement("option", { key: value, value: value, __source: { fileName: "", lineNumber: 35, columnNumber: 19 }, __self: this }, value))))), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full p-3 bg-[#ff69b4] rounded-md text-white font-semibold hover:bg-[#ff5b9a] font-roboto", __source: { fileName: "", lineNumber: 42, columnNumber: 11 }, __self: this }, "Create Avatar"))), /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 50, columnNumber: 7 }, __self: this }, ` body { font-family: 'Crimson Text', serif; } `)); }